FastClick使用之trigger觸發click失效
阿新 • • 發佈:2018-11-03
最近為了提升web app在ios上的點選效率,使用了FastClick.js,效果很明顯,基本是點選後立馬有反饋。可是發現一個問題,在使用模擬點選的時候,並不能觸發點選的目的。
$("#btn").trigger("click");//模擬點選
而以上程式碼,在安卓上,卻能正常觸發。
於是百度查找了相關的資料,找到以下內容(引用自http://amazeui.org/1.x/javascript/fastclick/)
不應用 FastClick 的場景
-
桌面瀏覽器;
-
如果 viewport meta 標籤 中設定了
width=device-width
Copy
<meta name="viewport" content="width=device-width, initial-scale=1">
-
viewport meta 標籤如果設定了
user-scalable=no
,Android 上的 Chrome(所有版本)都會禁用 300ms 延遲。 -
IE10 中,可以使用 css 屬性
-ms-touch-action: none
禁止元素雙擊縮放(參考文章)。
根據上面描述,終於知道在安卓之所以能生效,是因為屬於FastClick不應用的場景,而IOS則應用上了FastClick的效果。於是跟蹤程式碼,各種除錯,發現了在ios上,需要呼叫“模擬兩次觸發”才能完成一次真正的點選事件;
於是寫了如下擴充套件:
var notNeed = FastClick.notNeeded(document.body);
$.fn.triggerFastClick=function(){
this.trigger("click");
if(!notNeed){
this.trigger("click");
}
}
需要用到模擬點選事件的時候,就使用$("#btn").triggerFastClick()來代替原來的trigger("click");
目前暫時用這種方法處理了在FastClick環境下模擬觸發點選失效的問題,不知是否有其他解決方法?