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