我想禁用在我的 Web 应用程序中的图像上长按（触摸并按住）后出现的上下文菜单。我看过有不同想法的帖子，但似乎没有一个对我有用。
有没有办法通过 HTML/CSS/Javascript 在 Android 上做到这一点？
在 Android 上长按禁用上下文菜单
IT技术
javascript
android
mobile-webkit
2021-01-27 18:45:30
6个回答
上下文菜单有它自己的事件。你只需要抓住它并阻止它传播。
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
这应该适用于 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>
对我来说，吸收所有事件不是一种选择，因为我想禁用长按下载，同时仍允许用户缩放和平移图像。我只能通过在图像顶部分层“盾牌”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;
}
希望这对某人有帮助！
这可以使用 CSS来完成：
img {
pointer-events: none;
}
我使用了 Nurik 的完整示例，但元素（我页面中的输入图像）也被禁用了点击。
我通过以下方式更改原始行：
原线：
node.ontouchstart = absorbEvent_;
我的改变：
node.ontouchstart = node.onclick;
使用此方法，我禁用了 logpress 上的弹出保存图像菜单，但保留单击事件。
我正在 Dolphin HD 浏览器下使用 Android 2.2 的 7" 平板电脑进行测试，并且工作正常！
其它你可能感兴趣的问题