禁用Android上的长水龙头上下文菜单

StackOverflow https://stackoverflow.com/questions/3413683

题

我想禁用在我的web应用程序图像的长击（触摸并保持）后出现的上下文菜单。我已经看到了不同的想法的帖子如何做到这一点，但没有人似乎为我工作。

有没有办法通过HTML / CSS / JavaScript的？

要做到这一点在Android
有帮助吗？

解决方案

此应该在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>

其他提示

<强>上下文菜单具有它自己的事件。你只需要抓住它和阻止其扩散。 

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

对于我来说，吸收所有的事件是不是因为我想禁用长按下载量，同时还允许用户缩放和平移图像上的选项。我能够利用CSS来解决这个和HTML仅通过像这样在图像的顶部层叠“屏蔽” 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;
}

希望这可以帮助别人！

我用Nurik完整的示例，但该元素（在我的网页的输入图像）中的溶液禁用用于点击太

我通过这个改变原来的行：

原始行：

node.ontouchstart = absorbEvent_;

我的变化：

node.ontouchstart = node.onclick;

本approuch我禁止弹出保存图像菜单上logpress但保留click事件。

I'm一个7" 平板电脑的海豚浏览器HD下测试了Android 2.2和工作正常！

这可以通过使用CSS 完成：

img {
  pointer-events: none;
}

移动

使用此CSS代码 
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

<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事件，在事件处理程序返回假。

您还可以捕获click事件，并检查其鼠标按钮激发与event.button的情况下，在一些浏览器呢。

只要有类似的问题。上述建议并没有为我工作在Andoid浏览器，但我发现，显示有问题的图像作为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;

我也有过类似的问题。我试过几个解决方案，从这个线程和另一个线程的Safari浏览器同样的问题（的中移动的Safari（iPad / iPhone的））上长按防止默认上下文菜单/ longclick。坏的部分是，我无法使用onTouchStart，onTouchEnd等...

只有防止onContextMenu该事件。段从阵营16.5.2。 经测试，在镀铬只。 

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

希望它帮助某人。干杯！

将禁用副本，但不禁止选择。

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

工程在web视图。

通过原始的JavaScript没有是那些获得所要求的上下文菜单事件。也许在Java世界中有什么东西......其实有关于在Android的WebKit JavaScript事件（如焦点不工作的权利）的几个问题。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top