【原】[webkit移動開發筆記]之禁止觸發系統預設菜單

在手機webkit瀏覽器中，使用者在某一些按鈕上長按3秒鐘後，會彈出一個系統的列表，ios和android各自展現不一樣，列表可以有複製或在在新視窗開啟的等操作，這種體驗對於按鈕來說是不需要的，按鈕上是綁定事件，有特殊功能，而這裡系統把它當做一個連結的意義。查看了代碼，原來是一個a標籤，連結地址為空白。

<a href="#" class="btn">查看餘額</a>

找了資料後，ios平台有個解決辦法

可以通過控制當前元素的-webkit-touch-callout的樣式屬性為none;屬性來禁止觸發系統的菜單

a{-webkit-touch-callout:none}

這裡補充-webkit-touch-callout:none 的功能，測試結果如下：

1.ios 長按時不觸發系統功能表

2.ios 和 android 長按時不觸發下載圖片菜單

 

對於ios，我們可以使用-webkit-touch-callout:none，那麼如何如何禁止 android 系統預設菜單呢？

實踐中，發現在android2.x系統中設定a標籤的href屬性為 javascript:void(0) ，即連結屬性為空白，可以禁止系統預設菜單

<a href="javascript:void(0);" class="btn">查看餘額</a>

而對於部分android4.x系統，這種做法又失效了，android機器真是各種瘋啊...

後來在 Web前端業界傳說中氛圍最好群——鬼懿IT 尋求協助

，

要使用a標籤目前還是找不到最優的解決辦法，如果把a標籤用 button 或者 input button 來替換的確可以解決該問題，但是沒有a標籤被點擊時產生的半透明灰色背景效果，使用者體驗一般

<button class="btn">查看餘額</button>或者<input type="button" class="btn" value="查看餘額"/>

一點經驗談，希望給遇到過的童鞋帶來協助，如果大家有更好的意見，歡迎留言討論~