【问题标题】:Disable callout (context menu) on Android在 Android 上禁用标注(上下文菜单)
【发布时间】:2015-04-21 00:24:06
【问题描述】:

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

我已经在使用-webkit-touch-callout: none;,它在 iPhone 和 iPad 上运行良好,但似乎不适用于 Android(在 Android 4.4 上测试)。

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

有什么建议吗?

【问题讨论】:

    标签: android html css web-applications touch


    【解决方案1】:

    您可以尝试这样做:

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

    我希望这很有用...

    Doc oncontextmenu

    【讨论】:

    • 正如我的问题所述,我已经尝试过了,但它不起作用。
    • 你还没有谈到stopPropagation。
    • 在这种情况下有什么不同?我试图阻止默认浏览器操作,而不是阻止事件冒泡..
    • 我已经在 Android 4.4.2 上试用过,它正在工作。你试过这段代码吗? Snippet on CodePen
    • 这个解决方案对我有用,css只有一个没有
    【解决方案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(“甜甜圈”)或更高版本。希望它会有所帮助。

    【讨论】:

    • 这会禁用所有事件。我需要禁用触摸目标上的上下文菜单,但这些应该仍然是可触摸的。
    【解决方案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;
    

    【讨论】:

    • pointer-events: none 禁用所有指针事件。我只需要禁用上下文菜单;不应禁用所有其他触摸事件。
    • @Grodriguez 你找到解决方案了吗?
    • @captaindroid 不
    猜你喜欢
    • 1970-01-01
    • 2011-03-25
    • 1970-01-01
    • 2018-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多