2019獨角獸企業重金招聘Python工程師標準>>>

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

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

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

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

不應用 FastClick 的場景

• 桌面瀏覽器；

• 如果?viewport meta 標簽?中設置了?width=device-width， Android 上的 Chrome 32+ 會禁用 300ms 延時；

?Copy

1	<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上，需要調用“模擬兩次觸發”才能完成一次真正的點擊事件;

于是寫了如下擴展：

1 2 3 4 5 6 7

var?notNeed?=?FastClick.notNeeded(document.body); $.fn.triggerFastClick=function(){ ????this.trigger("click"); ????????if(!notNeed){ ????????this.trigger("click"); ????} }

需要用到模擬點擊事件的時候，就使用$("#btn").triggerFastClick()來代替原來的trigger("click");

目前暫時用這種方法處理了在FastClick環境下模擬觸發點擊失效的問題，不知是否有其他解決方法？

?

其他解決方案：

解決方法：

1. 【官方推薦】：當DOM元素需要一個non-synthetic click（即非人工觸發的點擊trigger）的時候，最好在該DOM元素上加上class="needsclick "（原文：http://ftlabs.github.io/fastclick/）

2. 使用2次trigger，即

$('.J_Spec').trigger(click_name); $('.J_Spec').trigger(click_name);

3. 在js代碼中使用

if ($.os.android) window._fastClick.destroy();

轉載于:https://my.oschina.net/thinkive/blog/711305

總結

以上是生活随笔為你收集整理的FastClick使用之trigger触发click失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。