Block long-press events for mobile browsers

Recently made a picture after the burning page on the mobile browser, the process is to hold the screen and move, the picture will slowly show, release the hand when the picture immediately shattered disappear.

However, long press the image will trigger the browser's own long-press event, from the Internet search learned that there are the following two ways:

1. Add Event Ontouchstart = "return false;"

2.css unification plus-webkit-user-select:none; -webkit-touch-callout:none;

But the above approach to the other requirements of the page, the end of my approach is to write an empty transparent div placed on the top of the page to cover all elements, so you can avoid the system's long-press event, the need to shield long press events, hide Div, div style: {position:fixed; Width:100%;height:100%;z-index:99;background:rgba (255,255,255,0); overflow:hidden;top:0px;left:0px;}

PS: In the process also encountered a small problem is, in the need to long press the QR code to identify the page, has removed the current page of the Mask Div, but the long press or not response.

The two-dimensional code start style is: {width:46%;p osition:fixed;left:27%;top:40%;}

It was later found that the two-dimensional code must be added to the layer height of the z-index:100, which is greater than the mask div.

Block long-press events for mobile browsers