在Android上的长按上禁用上下文菜单

Roy*_*ron 53 javascript android mobile-webkit

我想禁用在我的Web应用程序中长时间点击(触摸并按住)图像后出现的上下文菜单.我看过不同想法的帖子怎么做,但它们似乎都不适合我.

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

bbs*_*nbb 149

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

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};
Run Code Online (Sandbox Code Playgroud)

  • 你先生需要更多的赞成!在尝试了这么多建议的解决方案后,这是唯一对我有用的解决方案. (11认同)
  • 应该是接受的答案.十分感谢! (3认同)

Rom*_*rik 33

这应该适用于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>
Run Code Online (Sandbox Code Playgroud)

  • 此解决方案禁用所有触摸事件.这可能是有限的! (6认同)
  • 这真的是正确的答案吗?看起来像`img.addEventListener('contetxmenu',function(e){e.preventDefault(); return false;},false);`应该不工作?上面的解决方案将阻止所有输入. (6认同)
  • 你经常看到这种事情,但如果可以的话,你真的想避免干扰事件的传播.给定事件对于"您的"组件以及页面上的其他组件可能很重要.例如,下拉列表外的点击可以是汇总下拉列表的队列,以及直接对应于点击的任何操作.找到一种不会完全破坏页面上事件处理的方法. (3认同)
  • 自8月8日以来没有看到任何OP,所以我决定使用SDK自己测试.我测试了1.5,1.6和2.2,它在所有这些上都运行得很好,所以我很高兴现在无需等待OP确认即可奖励赏金.+1也是一个很好的答案. (2认同)

Bri*_*ald 8

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

<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;
}
Run Code Online (Sandbox Code Playgroud)

希望这有助于某人!


dee*_*ell 7

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

document.oncontextmenu = function() {return false;};
Run Code Online (Sandbox Code Playgroud)

在 webView 中工作。


小智 5

我使用Nurik的完整示例,但元素(我页面中的输入图像)也被禁用了点击.

我改变原来的行:

原线:

node.ontouchstart = absorbEvent_;
Run Code Online (Sandbox Code Playgroud)

我的改变:

node.ontouchstart = node.onclick;
Run Code Online (Sandbox Code Playgroud)

使用此approuch我禁用logpress上的弹出保存图像菜单,但保持点击事件.

我在Dolphin HD浏览器下使用Android 2.2进行7英寸平板电脑测试,工作正常!


Art*_*eev 5

这可以使用CSS完成:

img {
  pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)

  • 这不仅会禁用长按,而且还会禁用例如正常的轻按,因此并不总是一个选项。 (2认同)