jQuery ContextMenu event not working in IOS 8.2

问题

I am using contextMenu event in .html sample, it will be fired when i long press on an DIV, but right now it is not working. Is something broken in latest IOS 8.2 version. Here is the 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 the working sample

http://jsfiddle.net/4zu1ckgg/

Please someone help me with this.

回答1:

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

In your case, on iOS and contrary to Android, "contextmenu" is not triggered when screen is long touched. To customize 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 the page explaining (among other) that touch events are not emulated as mouse events on every OS: http://www.html5rocks.com/en/mobile/touchandmouse/

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

来源：https://stackoverflow.com/questions/29228999/jquery-contextmenu-event-not-working-in-ios-8-2

标签

javascript

jquery

ios

contextmenu