在Android上禁用标注(上下文菜单)

问题描述 投票:22回答:3

在Web应用程序中,我需要禁用移动浏览器在按住并按住(“长按”键)触摸目标(例如<img>或链接)时显示的默认标注。

我已经在使用-webkit-touch-callout: none;,该功能在iPhone和iPad上都可以正常使用,但在Android上似乎无法使用(在Android 4.4上进行了测试)。

从W3邮件列表中的

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

有什么建议吗?

android html5 css3 web-applications touch
3个回答
6
投票

您可以尝试执行此操作:

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

我希望这是有用的...

Doc oncontextmenu


0
投票

   

 <!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(“甜甜圈”)或更高版本。希望会有所帮助。

0
投票

这种纯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;
© www.soinside.com 2019 - 2024. All rights reserved.