在Web应用程序中,我需要禁用移动浏览器在按住并按住(“长按”键)触摸目标(例如<img>
或链接)时显示的默认标注。
我已经在使用-webkit-touch-callout: none;
,该功能在iPhone和iPad上都可以正常使用,但在Android上似乎无法使用(在Android 4.4上进行了测试)。
This post建议在Javascript中为“ contextmenu”事件添加一个侦听器并调用e.preventDefault()
。这似乎也不起作用。
有什么建议吗?
您可以尝试执行此操作:
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
我希望这是有用的...
<!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('doodle'));
}
</script>
</head>
<body onload="init()">
<img id="doodle" src="http://www.google.com/logos/doodles/2015/spain-elections-2015-5652792221892608-hp2x.jpg" width="400">
</body>
</html>
这种纯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;