在移動 Safari (iPad / iPhone) 中防止長按/長按的默認上下文菜單

Question

對於網站，我想在用戶“長按”屏幕時顯示自定義上下文菜單。 我在我的代碼中創建了一個jQuery Longclick偵聽器來顯示自定義上下文菜單。 顯示上下文菜單，但也會顯示 iPad 的默認上下文菜單！ 我試圖通過向偵聽器中的事件添加preventDefault()來防止這種情況發生，但這不起作用：

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

問題

1. 你能阻止 iPad 的默認上下文菜單顯示嗎？
2. 可以通過使用 jQuery Longclick 插件來完成嗎？

---

Longclick 插件對 iPad 有一些特定的處理（假設它的源代碼片段）：

if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
  $(this)
  .bind(_mousedown_, schedule)
  .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
  .bind(_click_, click)
}

所以我假設這回答了我的第二個問題（假設插件使用了正確的事件）。

Answer 1

感謝 JDandChips 為我指出解決方案。 它與 longclick 插件完美結合。 為了文檔起見，我將發布我自己的答案以展示我所做的。

HTML：

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

Javascript 已經可以了：

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

解決方法是將這些規則添加到樣式表中：

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

禁用上下文菜單示例。

Answer 2

<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

如果您只想禁用錨按鈕標簽，請使用以下命令：

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

Answer 3

一個快速的 css 解決方案：

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

用戶選擇禁用突出顯示文本/區域。
觸摸標注禁用上下文菜單彈出。

Answer 4

不需要使用 JavaScript，它可以使用 css 執行。

要僅為圖像禁用上下文菜單，請使用

img{
-webkit-touch-callout: none !important; 
 -webkit-user-select: none !important; }

如果我們需要禁用特定類的上下文菜單，請使用

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }

Answer 5

我沒有 iPad，因此無法測試解決方案，但我確實遇到了類似的問題，已解決。 我不知道它是否對您有幫助，但這里是鏈接： 如何在 jQuery Mobile (iOS) 中禁用 Anchor 的默認行為

Answer 6

無需依賴-webkit-屬性。

如果您的鏈接是 Javascript 調用，則就像完全刪除href="void(0)"一樣簡單！ 您的ontouchend或onclick屬性仍然有效。 如果您希望鏈接看起來是原始的，請添加以下 css：

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

這將運行得更順暢，尤其是當頁面中有數百個鏈接時。

您還可以以 SEO 損失為代價將其擴展到“真實”頁面鏈接：

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

對於大多數網站來說，這不是一個很好的做法，但對於特定的移動友好情況（移動網絡應用程序），這可能是至關重要的。

快樂編碼！

Answer 7

這個 github 存儲庫對我有用。 就我而言，我使用 UIWebView 編寫了一個 iPad 應用程序。

https://github.com/vaidik/jquery-longpress

Answer 8

我用過這個：

<p onclick="window.location.href='https://google.com‘“>Link</p>