[英]Disabling the context menu on long taps on Android
我想禁用在我的Web應用程序中長時間點擊（觸摸並按住）圖像后出現的上下文菜單。 我看過不同想法的帖子怎么做，但它們似乎都不適合我。
有沒有辦法通過HTML / CSS / Javascript在Android上執行此操作？
上下文菜單有自己的事件。 你只需要抓住它並阻止它傳播。
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來解決這個問題，如下所示：
<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;
使用此approuch我禁用logpress上的彈出保存圖像菜單，但保持點擊事件。
我在Dolphin HD瀏覽器下使用Android 2.2進行7英寸平板電腦測試，工作正常！
將此CSS代碼用於移動設備
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
<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。
您還可以捕獲click事件，並在某些瀏覽器中檢查使用event.button觸發事件的鼠標按鈕。
剛遇到類似的問題。 以上建議在Andoid瀏覽器中對我不起作用，但我發現將有問題的圖像顯示為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;
我有類似的問題。 我已經嘗試了幾個來自這個線程的解決方案和另一個針對相同問題的safari線程（ 防止在移動Safari（iPad / iPhone）中的longpress / longclick上的默認上下文菜單 ）。 不好的是我無法使用onTouchStart，onTouchEnd等......
僅阻止來自onContextMenu的事件。 來自React 16.5.2的片段。 僅在鍍鉻中測試過。
<img {...props} onContextMenu={event => event.preventDefault()} onTouchStart={touchStart} onTouchEnd={touchEnd} />
希望它對某人有幫助。 干杯!
它將禁用復制，但不禁用選擇。
document.oncontextmenu = function() {return false;};
適用於webView。
通過原始javascript，沒有為上下文菜單調用的事件。 也許在Java世界中有一些東西......在Android webkit中，實際上有幾個關於javascript事件的問題（例如焦點無法正常工作）。
當移動用戶長按 HTML 中的圖像時如何啟用上下文菜單？
[英]How to ENABLE context menu when mobile user long-taps an image in HTML?
如何在Android / iOS設備中長按限制默認上下文菜單並顯示自定義菜單？
[英]How to restrict default context menu on long press in android/ios devices and show custom menu?
如何通過禁用Django中的上下文菜單在瀏覽器中打開pdf？
[英]how to open pdf in a browser with with disabling the context menu in django?
ReactJS - 在不禁用點擊事件的情況下禁用移動設備上下文菜單的單擊並按住？
[英]ReactJS - Disable Click & Hold for Context menu for mobile without disabling click events?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.