64

我想禁用在我的网络应用程序中长按（触摸并按住）图像后出现的上下文菜单。我看过有不同想法的帖子如何做到这一点，但它们似乎都不适合我。

有没有办法通过 HTML/CSS/Javascript 在 Android 上执行此操作？

4

12 回答 12

174

上下文菜单有自己的事件。你只需要抓住它并阻止它传播。

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};
于 2015-02-26T16:55:41.323 回答
39

这应该适用于 1.6 或更高版本（如果我没记错的话）。我不相信 1.5 或更早版本有解决方法。

<!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('theimage'));
    }
  </script>
</head>
<body onload="init()">
  <img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>
于 2010-08-09T08:46:23.400 回答
8

对我来说，吸收所有事件不是一个选项，因为我想禁用长按下载，同时仍然允许用户缩放和平移图像。我只能通过在图像顶部分层“屏蔽” div 来使用 css 和 html 解决这个问题，如下所示：

<div class="img-container">
  <div class="shield"></div>
  <img src="path.jpg">
</div>

img {
    max-width: 100%;
}

.shield {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

希望这对某人有帮助！

于 2013-07-12T15:29:01.070 回答
7

这可以使用 CSS来完成：

img {
  pointer-events: none;
}
于 2015-04-14T14:21:47.350 回答
5

我使用了 Nurik 的完整示例，但是该元素（我页面中的输入图像）也被禁用了点击。

我通过以下方式更改原始行：

原线：

node.ontouchstart = absorbEvent_;

我的改变：

node.ontouchstart = node.onclick;

使用此方法，我禁用了 logpress 上的弹出保存图像菜单，但保留了单击事件。

我在 Dolphin HD 浏览器下使用 Android 2.2 的 7 英寸平板电脑进行测试，并且工作正常！

于 2012-01-30T18:13:16.240 回答
5

它将禁用复制，但不会禁用选择。

document.oncontextmenu = function() {return false;};

在 web 视图中工作。

于 2019-07-03T15:36:31.870 回答
4

将此 CSS 代码用于移动设备

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
于 2014-11-06T13:49:12.843 回答
3 
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;
于 2017-06-12T14:55:50.090 回答
1

我有一个类似的问题。我已经尝试了这个线程的几个解决方案，以及针对同一问题的另一个 Safari 线程（防止移动 Safari（iPad / iPhone）中的 longpress / longclick 上的默认上下文菜单）。不好的部分是我不能使用 onTouchStart、onTouchEnd 等...

仅阻止来自 onContextMenu 的事件。来自 React 16.5.2 的片段。仅在 chrome 中测试。

    <img {...props} onContextMenu={event => event.preventDefault()}
    onTouchStart={touchStart}
    onTouchEnd={touchEnd} />

希望它可以帮助某人。干杯!

于 2018-11-19T15:42:12.283 回答
0 
<a id="moo" href=''> </a>

<script type="text/javascript">
    var moo = document.getElementById('moo');

    function handler(event) {
        event = event || context_menu.event;

        if (event.stopPropagation)
            event.stopPropagation();

        event.cancelBubble = true;
        return false;
    }

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;
</script>

捕获 onContextMenu 事件，并在事件处理程序中返回 false。

在某些浏览器中，您还可以捕获单击事件并使用 event.button 检查哪个鼠标按钮触发了该事件。

于 2010-08-09T06:21:23.533 回答
0

刚遇到类似的问题。上述建议在 Andoid 浏览器中对我不起作用，但我发现将有问题的图像显示为 CSS 背景图像而不是嵌入图像可以解决问题。

于 2016-09-04T22:03:24.227 回答
-4

通过原始 javascript，上下文菜单不会调用任何事件。也许在 Java 世界中有些东西......实际上在 Android webkit 中有几个关于 javascript 事件的问题（例如焦点无法正常工作）。

于 2010-08-09T06:42:09.210 回答