Question

在网络应用中，我需要禁用移动浏览器在触摸目标上触摸并按住（“长按”）时显示的默认标注，例如<img>或链接。

我已经使用-webkit-touch-callout: none;在iPhone和iPad上正常使用，但似乎无法在Android上运行（在Android 4.4上测试过）。

来自W3邮件列表的

This post建议在Javascript中为“contextmenu”事件添加一个监听器并调用e.preventDefault()。这似乎也不起作用。

有什么建议吗？

Answer 1

您可以尝试这样做：

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};

我希望这很有用......

Doc oncontextmenu

Answer 2

   

 <!DOCTYPE html>
    <html>
    <head>
      <script>
        function absorbEvent_(event) {
          var e = event || window.event;
          e.preventDefault && e.preventDefault();
          e.stopPropagation && e.stopPropagation();
          e.cancelBubble = true;
          e.returnValue = false;
          return false;
        }
    
        function preventLongPressMenu(node) {
          node.ontouchstart = absorbEvent_;
          node.ontouchmove = absorbEvent_;
          node.ontouchend = absorbEvent_;
          node.ontouchcancel = absorbEvent_;
        }
    
        function init() {
          preventLongPressMenu(document.getElementById('doodle'));
        }
      </script>
    </head>
    <body onload="init()">
      <img id="doodle" src="http://www.google.com/logos/doodles/2015/spain-elections-2015-5652792221892608-hp2x.jpg" width="400">
    </body>
    </html>

它应该适用于1.6（“甜甜圈”）或以上。希望它会有所帮助。

Answer 3

这种纯CSS方法对我有用：

    pointer-events: none; // for Android
    -webkit-touch-callout: none; // for iOS
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;

在Android上禁用标注（上下文菜单）

3 个答案: