JQuery ContextMenu event not working in iOS 8.2

I use the contextMenu event in the .html sample, it will be fired when I click on the DIV for a long time, but now it does not work. Something is broken in the latest version of iOS 8.2. Here is a sample code,

<head> <title></title> <script src="Scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#content").on("contextmenu", function () { alert("CM"); }); }); </script> </head> <body> <div id="content" style="height:300px; width:300px; background-color:gray;"></div> </body> 

Here is a working sample

http://jsfiddle.net/4zu1ckgg/

Please help me with this.

+5
source share
1 answer

Basically, on iOS, touch events are not emulated as mouse events . Use touch events instead: touchstart, touchmove, and touchhend.

In your case, on iOS and contrary to Android, "contextmenu" does not start when the screen is touched for a long time. To set up a long touch on iOS, you should use something like:

 // Timer for long touch detection var timerLongTouch; // Long touch flag for preventing "normal touch event" trigger when long touch ends var longTouch = false; $(touchableElement) .on("touchstart", function(event){ // Prevent default behavior event.preventDefault(); // Test that the touch is correctly detected alert("touchstart event"); // Timer for long touch detection timerLongTouch = setTimeout(function() { // Flag for preventing "normal touch event" trigger when touch ends. longTouch = true; // Test long touch detection (remove previous alert to test it correctly) alert("long mousedown"); }, 1000); }) .on("touchmove", function(event){ // Prevent default behavior event.preventDefault(); // If timerLongTouch is still running, then this is not a long touch // (there is a move) so stop the timer clearTimeout(timerLongTouch); if(longTouch){ longTouch = false; // Do here stuff linked to longTouch move } else { // Do here stuff linked to "normal" touch move } }) .on("touchend", function(){ // Prevent default behavior event.preventDefault(); // If timerLongTouch is still running, then this is not a long touch // so stop the timer clearTimeout(timerLongTouch); if(longTouch){ longTouch = false; // Do here stuff linked to long touch end // (if different from stuff done on long touch detection) } else { // Do here stuff linked to "normal" touch move } }); 

Here is a page explaining (among other things) that touch events are not emulated as mouse events in each OS: http://www.html5rocks.com/en/mobile/touchandmouse/

Hope this helps, it took me a long time to figure this out;)

+3
source

Source: https://habr.com/ru/post/1215984/


All Articles