移動端禁用系統預設選單

幻滅丶發表於2019-02-16

首先介紹兩個移動端私有屬性
-webkit-touch-callout,-webkit-tap-highlight-color
-webkit-touch-callout:當你觸控並按住觸控目標時候,禁止或顯示系統預設選單。在iOS上,當你觸控並按住觸控的目標,比如一個連結,Safari瀏覽器將顯示連結有關的系統預設選單。這個屬性可以讓你禁用系統預設選單。
-webkit-tap-highlight-color :當使用者點選iOS的Safari瀏覽器中的連結或JavaScript的可點選的元素時,覆蓋顯示的高亮顏色。

該屬性可以只設定透明度。如果未設定透明度,iOS Safari使用預設的透明度。當透明度設為0,則會禁用此屬性;當透明度設為1,元素在點選時不可見。

在手機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 長按時不觸發下載圖片選單

**安卓下,只能用button ,input type=”button” 代替a標籤

相關文章