javascript-在Android上長按時禁用上下文菜單

我想禁用長按(觸摸并按住)Web應用程序中的圖像后出現的上下文菜單。 我見過關于如何做到這一點的不同想法，但似乎沒有一個對我有用。

有沒有辦法通過HTML / CSS / Javascript在Android上執行此操作？

12個解決方案

145 votes

上下文菜單有其自己的事件。 您只需要抓住它并阻止它傳播。

window.oncontextmenu = function(event) {

event.preventDefault();

event.stopPropagation();

return false;

};

bbsimonbb answered 2020-01-03T00:09:22Z

33 votes

這應該適用于1.6或更高版本(如果我沒記錯的話)。 我不認為有1.5或更早版本的解決方法。

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'));

}

Roman Nurik answered 2020-01-03T00:09:02Z

8 votes

對我來說，吸收所有事件不是一個選擇，因為我想禁用長按下載，同時仍然允許用戶縮放和平移圖像。 我只能使用css和html來解決此問題，方法是在圖像上方分層放置一個“ shield” div，如下所示：

img {

max-width: 100%;

}

.shield {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1;

}

希望這對某人有幫助！

Brian FitzGerald answered 2020-01-03T00:09:46Z

5 votes

我使用了Nurik的完整示例，但是元素(我頁面中的輸入圖像)也被禁用了。

我通過以下方式更改原始行：

原始行：

node.ontouchstart = absorbEvent_;

我的變化：

node.ontouchstart = node.onclick;

通過這種方法，我禁用了wordpress上的彈出式保存圖像菜單，但保留了click事件。

我正在使用Dolphin HD瀏覽器在裝有Android 2.2的7英寸平板電腦上進行測試，效果很好！

GAL answered 2020-01-03T00:10:28Z

5 votes

可以使用CSS完成：

img {

pointer-events: none;

}

Artem Andreev answered 2020-01-03T00:10:48Z

3 votes

使用此CSS代碼進行移動

-webkit-touch-callout: none;

-webkit-user-select: none; /* Disable selection/copy in UIWebView */

vitralyoz answered 2020-01-03T00:11:08Z

0 votes

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;

捕獲onContextMenu事件，然后在事件處理程序中返回false。

無論如何，您還可以在某些瀏覽器中捕獲click事件并使用event.button檢查哪個鼠標按鈕觸發了該事件。

Hare-Krishna answered 2020-01-03T00:11:32Z

0 votes

只是有一個類似的問題。 上述建議在Andoid瀏覽器中對我不起作用，但我發現將有問題的圖像顯示為CSS背景圖像而不是嵌入式圖像可以解決該問題。

Richard B answered 2020-01-03T00:11:53Z

0 votes

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;

soonsuweb answered 2020-01-03T00:12:08Z

0 votes

我有一個類似的問題。 我已經嘗試過從該線程和另一個用于safari的線程解決同一問題(在移動Safari(iPad / iPhone)中防止longpress / longclick上的默認上下文菜單)提供了幾種解決方案。 糟糕的是我無法使用onTouchStart，onTouchEnd等...

僅阻止onContextMenu中的事件。 React 16.5.2的片段。僅在鍍鉻中測試。

event.preventDefault()}

onTouchStart={touchStart}

onTouchEnd={touchEnd} />

希望它能幫助到別人。 干杯!

Vlad Ilie answered 2020-01-03T00:12:42Z

0 votes

它將禁用復制，但不會禁用選擇。

document.oncontextmenu = function() {return false;};

在webView中工作。

deepcell answered 2020-01-03T00:13:06Z

-3 votes

通過原始javascript，不會為上下文菜單調用任何事件。 也許在Java世界中存在某些問題……實際上，Android Webkit中存在一些與javascript事件有關的問題(例如，焦點無法正常工作)。

Moncader answered 2020-01-03T00:13:26Z

總結

以上是生活随笔為你收集整理的android webview 长按菜单拦截,javascript-在Android上长按时禁用上下文菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。