javascript-在Android上长按时禁用上下文菜单
我想禁用长按(触摸并按住)Web应用程序中的图像后出现的上下文菜单。 我见过关于如何做到这一点的不同想法，但似乎没有一个对我有用。
有没有办法通过HTML / CSS / Javascript在Android上执行此操作？
12个解决方案
145 votes
上下文菜单有其自己的事件。 您只需要抓住它并阻止它传播。
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
bbsimonbb answered 2020-01-03T00:09:22Z
33 votes
这应该适用于1.6或更高版本(如果我没记错的话)。 我不认为有1.5或更早版本的解决方法。
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'));
}
Roman Nurik answered 2020-01-03T00:09:02Z
8 votes
对我来说，吸收所有事件不是一个选择，因为我想禁用长按下载，同时仍然允许用户缩放和平移图像。 我只能使用css和html来解决此问题，方法是在图像上方分层放置一个“ shield” div，如下所示：
img {
max-width: 100%;
}
.shield {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
希望这对某人有帮助！
Brian FitzGerald answered 2020-01-03T00:09:46Z
5 votes
我使用了Nurik的完整示例，但是元素(我页面中的输入图像)也被禁用了。
我通过以下方式更改原始行：
原始行：
node.ontouchstart = absorbEvent_;
我的变化：
node.ontouchstart = node.onclick;
通过这种方法，我禁用了wordpress上的弹出式保存图像菜单，但保留了click事件。
我正在使用Dolphin HD浏览器在装有Android 2.2的7英寸平板电脑上进行测试，效果很好！
GAL answered 2020-01-03T00:10:28Z
5 votes
可以使用CSS完成：
img {
pointer-events: none;
}
Artem Andreev answered 2020-01-03T00:10:48Z
3 votes
使用此CSS代码进行移动
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
vitralyoz answered 2020-01-03T00:11:08Z
0 votes
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;
捕获onContextMenu事件，然后在事件处理程序中返回false。
无论如何，您还可以在某些浏览器中捕获click事件并使用event.button检查哪个鼠标按钮触发了该事件。
Hare-Krishna answered 2020-01-03T00:11:32Z
0 votes
只是有一个类似的问题。 上述建议在Andoid浏览器中对我不起作用，但我发现将有问题的图像显示为CSS背景图像而不是嵌入式图像可以解决该问题。
Richard B answered 2020-01-03T00:11:53Z
0 votes
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;
soonsuweb answered 2020-01-03T00:12:08Z
0 votes
我有一个类似的问题。 我已经尝试过从该线程和另一个用于safari的线程解决同一问题(在移动Safari(iPad / iPhone)中防止longpress / longclick上的默认上下文菜单)提供了几种解决方案。 糟糕的是我无法使用onTouchStart，onTouchEnd等...
仅阻止onContextMenu中的事件。 React 16.5.2的片段。仅在镀铬中测试。
event.preventDefault()}
onTouchStart={touchStart}
onTouchEnd={touchEnd} />
希望它能帮助到别人。 干杯!
Vlad Ilie answered 2020-01-03T00:12:42Z
0 votes
它将禁用复制，但不会禁用选择。
document.oncontextmenu = function() {return false;};
在webView中工作。
deepcell answered 2020-01-03T00:13:06Z
-3 votes
通过原始javascript，不会为上下文菜单调用任何事件。 也许在Java世界中存在某些问题……实际上，Android Webkit中存在一些与javascript事件有关的问题(例如，焦点无法正常工作)。
Moncader answered 2020-01-03T00:13:26Z
