在Android上长时间closures上下文菜单

我想要禁用在我的Web应用程序中的图像长按(触摸并按住)后出现的上下文菜单。 我已经看到不同想法的post怎么做,但他们都没有为我工作。

有没有办法通过HTML / CSS / Javascript在Android上执行此操作?

这应该工作在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> 

上下文菜单有它自己的事件。 你只需要抓住它并阻止它传播。

 window.oncontextmenu = function(event) { event.preventDefault(); event.stopPropagation(); return false; }; 

对我来说,吸收所有的事件是不可取的,因为我想禁用长时间的下载,同时仍然允许用户缩放和平移图像。 我能够解决这个与CSS和HTML只有通过在图像上层叠一个“盾”div像这样:

 <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; } 

希望这可以帮助别人!

我使用Nurik的完整示例,但是元素(页面中的input图像)也被禁用。

我改变了原来的行:

原始行:

 node.ontouchstart = absorbEvent_; 

我的改变:

 node.ontouchstart = node.onclick; 

与此approuch我禁用popup保存图像菜单上的日志,但保持点击事件。

我正在用Dolphin HD浏览器在Android 2.2上testing7英寸平板电脑,并且工作正常!

这可以使用CSS完成:

 img { pointer-events: none; } 

使用这个CSS代码的移动

 -webkit-touch-callout: none; -webkit-user-select: none; /* Disable selection/copy in UIWebView */ 
 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; 
 <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。

您还可以捕获单击事件,并在某些浏览器中检查哪个鼠标button用event.button触发了该事件。

刚刚有一个类似的问题。 以上build议在Andoid浏览器中并不适用于我,但是我发现将有问题的图像显示为CSS背景图像而不是embedded图像可以解决问题。

通过原始的JavaScript没有事件被调用的上下文菜单。 也许在Java世界里有一些东西…实际上在Android webkit中有几个关于javascript事件的问题(比如焦点不对)。