FastClick使用之trigger觸發click失效

最近爲了提升web app在ios上的點擊效率,使用了FastClick.js,效果很明顯,基本是點擊後立馬有反饋。可是發現一個問題,在使用模擬點擊的時候,並不能觸發點擊的目的。

$("#btn").trigger("click");//模擬點擊

而以上代碼,在安卓上,卻能正常觸發。

於是百度查找了相關的資料,找到以下內容(引用自http://amazeui.org/1.x/javascript/fastclick/

不應用 FastClick 的場景

  • 桌面瀏覽器;

  • 如果 viewport meta 標籤 中設置了 width=device-width, Android 上的 Chrome 32+ 會禁用 300ms 延時;

 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環境下模擬觸發點擊失效的問題,不知是否有其他解決方法?


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章