在 Android 上长按禁用上下文菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3413683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling the context menu on long taps on Android
提问by Roy Sharon
I would like to disable the context menu that appears after a long tap (touch and hold) on images in my web application. I've seen posts with different ideas how to do it, but none of them seem to work for me.
我想禁用在我的 Web 应用程序中长按（触摸并按住）图像后出现的上下文菜单。我看过有不同想法的帖子，但似乎没有一个对我有用。
Is there a way to do this on Android via HTML/CSS/Javascript?
有没有办法通过 HTML/CSS/Javascript 在 Android 上做到这一点？
采纳答案by Roman Nurik
This should work on 1.6 or later (if I recall correctly). I don't believe there's a workaround for 1.5 or earlier.
这应该适用于 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>
回答by bbsimonbb
The context menu has its own event. You just need to catch it and stop it from propagating.
上下文菜单有它自己的事件。你只需要抓住它并阻止它传播。
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
回答by Brian FitzGerald
For me, absorbing all the events was not an option since I wanted to disable long press downloads while still allowing the user to zoom and pan on the image. I was able to solve this with css and html only by layering a "shield" div on top of the image like so:
对我来说，吸收所有事件不是一个选项，因为我想禁用长按下载，同时仍然允许用户缩放和平移图像。我只能通过在图像顶部分层“盾牌”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;
}
Hope this helps someone!
希望这可以帮助某人！
回答by GAL
I use the complete example by Nurik but the the element (an input image in my page) was disable for the click too.
我使用了 Nurik 的完整示例，但元素（我页面中的输入图像）也被禁用了点击。
I change the original line by this:
我通过以下方式更改原始行：
original line:
原线：
node.ontouchstart = absorbEvent_;
my change:
我的改变：
node.ontouchstart = node.onclick;
with this approuch i disable the pop-up save image menu on logpress but keep the click event.
使用此方法，我禁用了 logpress 上的弹出保存图像菜单，但保留单击事件。
I′m testing on a 7" tablet with Android 2.2 under a Dolphin HD browser and works fine!
我正在使用 Android 2.2 的 7" 平板电脑在 Dolphin HD 浏览器下进行测试，并且工作正常！
回答by vitralyoz
Use this CSS codes for mobile
将此 CSS 代码用于移动设备
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
回答by soonsuweb
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;
回答by Vlad Ilie
I've had a similar issue. I've tried couple of solution from this thread and another thread for safari on the same problem (Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)) . The bad part was that I couldn't use onTouchStart,onTouchEnd etc...
我有过类似的问题。我已经尝试了该线程中的几个解决方案和另一个用于 safari 的线程解决同一问题（防止移动 Safari (iPad / iPhone) 中的 longpress / longclick 上的默认上下文菜单）。不好的部分是我不能使用 onTouchStart、onTouchEnd 等......
Only prevent the event from onContextMenu. Snippet from React 16.5.2. Tested in chrome only.
仅阻止来自 onContextMenu 的事件。来自 React 16.5.2 的片段。仅在 chrome 中测试。
<img {...props} onContextMenu={event => event.preventDefault()}
onTouchStart={touchStart}
onTouchEnd={touchEnd} />Hope it helps somebody. Cheers!
希望它可以帮助某人。干杯!
回答by deepcell
It will disable copy, but do not disable selection.
它将禁用复制，但不会禁用选择。
document.oncontextmenu = function() {return false;};
Works in webView.
在 webView 中工作。
回答by RichardB
Just had a similar problem. The above suggestions did not work for me in the Andoid browser, but I found that displaying the problematic image as a CSS background image rather than an embedded image fixed the problem.
刚刚遇到了类似的问题。上述建议在 Andoid 浏览器中对我不起作用，但我发现将有问题的图像显示为 CSS 背景图像而不是嵌入图像解决了问题。
