Fastclick 導致click事件觸發兩次的問題

foreverpx發表於2015-07-02
AST事件

我在移動web上使用Fastclick這個庫去解決300ms延遲問題，但是在安卓4.2下的webview中引發了另一個比較奇怪的bug。

在A頁面中有個 a button，在B頁面中有個 b button，a和b都在同一個position，給a和b都註冊一個click事件。a的click事件觸發後跳轉到B頁面。當a被點選後調到B頁面，你會發現b按鈕的click事件也被觸發了。

沒錯，事件‘穿透’了兩個頁面！

但其實並沒有穿透，點選a按鈕時，其實有如下兩個動作：

  1. fastclick用touchstart等事件模擬的click事件的觸發，只是第一次click。
  2. 裝置原本的300ms延遲後的click事件。此時頁面已載入成B，而這個click點選的是B頁面上的b按鈕。

在ios等裝置中，第二個click事件其實被fastclick遮蔽掉了，所以沒出現這個問題，但是在android 4.2的瀏覽器中卻bug搬的遮蔽失效，導致這個問題。

查了許多的相關資料，老外稱這個現象為ghost click，大部分並沒有什麼有效的解決方案。

最後在stackoverflow中找到了一個hack方案，如下：

preventClick { width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; }
<body>
    <div id="preventClick"></div>
</body>
function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300);
}

原理是每個頁面前300ms都被一個透明的div去覆蓋，所以第二個click是點不到對應的button。。

雖然這種方式比較暴力，但是還是奏效的，在沒什麼更好的方式前，可以先hack之。

文章作者：forevercjl
文章原文csdn連結：www.foreverpx.cn
轉載請註明出處。

相關文章