防止移動Safari（iPad/iPhone）中longpress/longclick上的默認上下文菜單

對於網站，我想在用戶「長按」屏幕時顯示自定義上下文菜單。我在代碼中創建了一個jQuery Longclick偵聽器來顯示自定義上下文菜單。會顯示上下文菜單，但iPad的默認上下文菜單也會顯示！我試圖在我的聽衆加入preventDefault()的事件，以防止這一點，但是這並不工作：防止移動Safari（iPad/iPhone）中longpress/longclick上的默認上下文菜單

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

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

問題

可以防止iPad的默認上下文菜單顯示？
可以通過使用jQuery Longclick插件完成嗎？

的Longclick插件已經爲iPad的一些具體處理（通過這個片段的it's source code假設）：

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

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

來源

2012-09-06 Jasper de Vries

感謝JDandChips的pointing我的解決方案。它可以與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; }

Disabled context menu example。

更新：在jQuery Longclick插件似乎只有Safari iPad上的合作，而不是在谷歌瀏覽器！目前我正在研究這個問題。

更新2：我已經嵌入Longclick JavaScript中的小提琴的來源，因爲我發現了以下錯誤在Chrome（由於https）：

拒絕執行腳本從'https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js'，因爲它的MIME類型（'text/plain'）不可執行，並且啓用嚴格的MIME類型檢查。

查看更新版本：

來源

2012-09-18 07:42:09

它在jsfiddle.net上工作，但不能在本地頁面上工作爲什麼？ – RGA

你在頁面上加載了http://code.jquery.com/jquery-1.8.2.js嗎？ –

是的，我做到了，但沒有爲我工作。 – RGA

我沒有iPad，因此無法測試解決方案，但我確實遇到過類似的問題，並已解決。我不知道它是否對你有任何幫助，但這裏是鏈接：How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

來源

2012-09-14 12:53:05 JDandChips

謝謝你！它完美的作品。 –

很高興能幫到你！ – JDandChips

快速CSS的解決方案：

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

用戶選擇禁用高亮文本/地區。
touch-callout禁用上下文菜單彈出。

來源

2013-08-11 19:33:49 Federico

我想用戶仍然選擇，但我不想彈出的上下文菜單....當我刪除-webkit用戶選擇：無，它仍然顯示我的上下文菜單:( – Satyam

爲什麼不'html {display：none！important;}'？ – Andy

<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 */ 
}

來源

2014-10-28 14:31:01

將此全局應用到所有鏈接是移動網站上的一個不好的做法 – Andy

這適用於iphone ios9我的父親經常在listview項上點擊，並且此css禁用彈出窗口。 – Guus

我強烈建議對明星選擇，甚至將其標記在這種情況下的反模式。全面關閉基本的瀏覽器功能可能會導致您的問題。這種解痙手術式的方法使得項目進展緩慢。方案二，但是，是可以接受的，只要你在目標方案做到這一點。這只是我的2美分。 – dudewad

沒有必要依靠-webkit-性能。

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

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

這將運行順暢了很多，尤其是當有數百個頁面的鏈接。

您還可以擴展這對「真實」的網頁鏈接，在搜索引擎優化的成本損失：大多數網站

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

不完全是很好的做法，但對於特定移動友好的情況下（移動網絡應用程序），這可能至關重要。

快樂編碼！

來源

2015-05-31 00:29:03

這個github倉庫適合我。在我的情況下，我使用UIWebView編寫了一個iPad應用程序。

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

來源

2017-11-26 21:48:04

防止移動Safari（iPad/iPhone）中longpress/longclick上的默認上下文菜單

回答

相關問題