最近移動(dòng)端m站的開發(fā)中遇到了點(diǎn)擊穿透問題，就此總結(jié)一番。

先說下我遇到的問題，項(xiàng)目使用react框架，并且引入了react-fastclick庫，可以解決click事件的穿透問題，但是對(duì)于下層是 a標(biāo)簽 的情況，依舊存在穿透問題，會(huì)觸發(fā)鏈接。

我的解決方法是把上層的事件放在了一個(gè)setTimeout(() => {}, 0)中。

goBack()  {
    setTimeout(() => {
        browserHistory.goBack()
    }, 0)
}

下面說一下點(diǎn)擊穿透問題是怎么來的。

點(diǎn)擊穿透是指，在移動(dòng)端H5頁面中，當(dāng)點(diǎn)擊事件會(huì)切到一個(gè)新頁面時(shí)（比如返回上一頁面，或彈出彈窗頁面，或關(guān)閉遮罩層），新頁面中相應(yīng)的位置如果有事件（或input等輸入框），就會(huì)被觸發(fā)。

這是因?yàn)樵趐c頁面中，一次點(diǎn)擊行為包括 mousedown -> click -> mouseup，而在移動(dòng)端，則是touchstart -> touchmove -> touchend。
在移動(dòng)端，雖然沒有 mouse，依然會(huì)響應(yīng) mouse 事件，但是有個(gè)300ms 的時(shí)延。于是移動(dòng)端的一次點(diǎn)擊其實(shí)是這樣的：touchstart -> touchmove -> touchend -> 300ms ->mousedown -> click -> mouseup。
之所以有時(shí)延，是因?yàn)樵谶@ 300ms 中，移動(dòng)端會(huì)檢測(cè)是否有雙擊行為。

正因如此，在這 300ms 之中，頁面變成了新的頁面，click 事件就會(huì)觸發(fā)成新頁面中的 click 事件了。

這種問題可以通過一些庫來解決，比如fastclick庫，其實(shí)現(xiàn)思路是，取消 click 事件（參看源碼 164-173 行），用 touchend 模擬快速點(diǎn)擊行為（參看源碼 521-610 行）。其實(shí)就是在檢測(cè)到 touchend 事件的時(shí)候，會(huì)通過 DOM 自定義事件立即出發(fā)模擬一個(gè) click 事件，并把瀏覽器在 300ms 之后真正的 click 事件阻止掉。

但正如文章開頭所講，fastclick 對(duì)于 a 標(biāo)簽的情況依然存在問題，仍需自行解決。

對(duì)于瀏覽器點(diǎn)擊事件更加詳盡的介紹，可參考這篇文章，雖是遠(yuǎn)古文，耐心讀下來對(duì)夯實(shí)基礎(chǔ)會(huì)有很大的幫助。