在 Android 上长按时禁用上下文菜单
Posted
技术标签:
【中文标题】在 Android 上长按时禁用上下文菜单【英文标题】:Disabling the context menu on long taps on Android 【发布时间】:2011-03-25 17:29:51 【问题描述】:我想禁用在我的网络应用程序中长按(触摸并按住)图像后出现的上下文菜单。我已经看到了不同想法的帖子,但它们似乎都不适合我。
有没有办法通过 html/CSS/javascript 在 android 上执行此操作?
【问题讨论】:
【参考方案1】:上下文菜单有自己的事件。你只需要抓住它并阻止它传播。
window.oncontextmenu = function(event)
event.preventDefault();
event.stopPropagation();
return false;
;
【讨论】:
有效!但现在我只想在锚元素上阻止上下文菜单。我有过滤器工作(当 [a] 时返回 false,否则返回 true)但返回 true 不显示对话框。所以..你如何告诉浏览器它应该显示? 我不会在函数中放置过滤器。将函数仅附加到要禁用其上下文菜单的元素会更好、更简洁。 在 Cordova Windows 上使用 Win10/UWP/MS Edge WebView :) 如何在 React 类组件中使用它?【参考方案2】:这应该适用于 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" >
</body>
</html>
【讨论】:
自 8 月 8 日以来没有看到任何 OP,所以我决定自己使用 SDK 进行测试。我测试了 1.5、1.6 和 2.2,它们在所有版本上都运行良好,所以我很高兴现在就奖励赏金而无需等待 OP 确认。 +1 也是一个很好的答案。 @Andy:听起来是个好主意。我已经接受了 Roman 的回答,并将尝试进行更广泛的测试。如果它看起来像一个设备错误,那就这样吧。如果没有,我将发布另一个更具体的问题。再次感谢对 *** 新人的热烈欢迎! 此解决方案禁用所有触摸事件。这可能会受到限制! 这真的是正确答案吗?似乎img.addEventListener('contetxmenu', function(e) e.preventDefault(); return false; , false);
应该工作不?上述解决方案将阻止所有输入。
你经常看到这种事情,但如果可以的话,你真的很想避免干扰事件的传播。给定事件对于“您的”组件以及页面上的其他组件可能很重要。例如,下拉菜单外的点击可能是滚动下拉列表的队列,以及与点击直接对应的任何操作。找到一种不会完全破坏您页面上的事件处理的方法。【参考方案3】:
对我来说,吸收所有事件不是一个选项,因为我想禁用长按下载,同时仍然允许用户缩放和平移图像。我只能通过在图像顶部分层“屏蔽”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;
希望这对某人有所帮助!
【讨论】:
您可能需要在父容器中添加position:relative
,以防止父容器接管所有空间。如果父级是 td
并有一个 ontouchstart
或其他与之链接的交互事件处理程序,这将特别棘手,因为您不会在视觉上看到 td
占用了所有区域。【参考方案4】:
可以做到using CSS:
img
pointer-events: none;
【讨论】:
这不仅会禁用长按,还会禁用例如正常的水龙头,所以并不总是一个选项。【参考方案5】:我使用了 Nurik 的完整示例,但该元素(我页面中的输入图像)也被禁用了点击。
我把原来的行改成这样:
原行:
node.ontouchstart = absorbEvent_;
我的改变:
node.ontouchstart = node.onclick;
使用此方法,我禁用了 logpress 上的弹出保存图像菜单,但保留了点击事件。
我正在使用 Dolphin HD 浏览器和 Android 2.2 的 7 英寸平板电脑上进行测试,并且运行良好!
【讨论】:
【参考方案6】:它将禁用复制,但不会禁用选择。
document.oncontextmenu = function() return false;;
在 webView 中工作。
【讨论】:
拯救了我的一天。谢谢!【参考方案7】:将此 CSS 代码用于移动设备
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
【讨论】:
这不适用于请求的浏览器,chrome。【参考方案8】: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;
【讨论】:
请添加一些描述来解释答案。pointer-events: none;
本质上是 CSS 元素的 return false
,所以它使我的按钮在这种情况下不起作用。【参考方案9】:
我也遇到过类似的问题。我已经从这个线程和另一个 safari 线程尝试了几个解决方案来解决同样的问题 (Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)) 。不好的是我不能使用 onTouchStart、onTouchEnd 等...
仅阻止来自 onContextMenu 的事件。来自 React 16.5.2 的片段。 仅在 chrome 中测试。
<img ...props onContextMenu=event => event.preventDefault()
onTouchStart=touchStart
onTouchEnd=touchEnd />
希望它可以帮助某人。干杯!
【讨论】:
【参考方案10】:<a id="moo" href=''> </a>
<script type="text/javascript">
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;
</script>
捕获 onContextMenu 事件,并在事件处理程序中返回 false。
在某些浏览器中,您还可以捕获单击事件并使用 event.button 检查哪个鼠标按钮触发了该事件。
【讨论】:
抱歉,这两种方法都不适用于 Android。 oncontextmenu 事件永远不会触发,当用户按住元素时,click 事件也不会触发。【参考方案11】:刚刚遇到类似的问题。上述建议在 Andoid 浏览器中对我不起作用,但我发现将有问题的图像显示为 CSS 背景图像而不是嵌入图像可以解决问题。
【讨论】:
【参考方案12】:通过原始 javascript,上下文菜单不会调用任何事件。也许在 Java 世界中有些东西......实际上在 Android webkit 中存在一些关于 javascript 事件的问题(例如焦点无法正常工作)。
【讨论】:
是的,我同意。由于我已经开发了一个将在浏览器中使用的 JavaScript 库,因此使用 java 对我来说不是一个选项。以上是关于在 Android 上长按时禁用上下文菜单的主要内容,如果未能解决你的问题,请参考以下文章