點(diǎn)擊穿透
- ** 點(diǎn)擊穿透 是移動(dòng)端web問題。**
- ** 始于移動(dòng)端較pc上的特殊功能：雙擊（ double tap）事件和長(zhǎng)按事件（Long Press）。當(dāng)用戶點(diǎn)擊click屏幕后，需要等待300ms后才能判斷用戶是否進(jìn)行了雙擊操作或者長(zhǎng)按操作，該延遲造成了點(diǎn)擊穿透。同時(shí)由于事件冒泡，點(diǎn)擊事件由于延遲可能會(huì)冒泡到其他DOM節(jié)點(diǎn)，所以事件冒泡也是點(diǎn)擊穿透的另外一個(gè)輔助成因。 **
- ** 本文主要介紹點(diǎn)擊穿透，并不是解決移動(dòng)端的點(diǎn)擊延遲問題，點(diǎn)擊延遲是的解決方案是使用
touch模擬tap事件。**
點(diǎn)擊穿透如何引起？
移動(dòng)端click事件延遲
在移動(dòng)端頁面中click的點(diǎn)擊事件有300ms的延遲，在執(zhí)行完 touch事件之后，目標(biāo)事件執(zhí)行，此時(shí) click 事件還在延遲的 300ms 之中。當(dāng) 300ms 到來的時(shí)候，click 到的其實(shí)是隱藏元素下方的元素。如果click的正下方有元素有click事件（包括a標(biāo)簽）或者input輸入框，最后觸發(fā)下層的click或獲取焦點(diǎn)彈出軟鍵盤等，即點(diǎn)擊穿透。
移動(dòng)端事件touch
PC響應(yīng)的是鼠標(biāo)事件，包括mousedown、mouseup、mousemove和click事件。觸發(fā)過程為：mousedown > mouseup > click。
移動(dòng)端用觸摸事件去實(shí)現(xiàn)類似PCS上鼠標(biāo)的功能。touch事件包含touchstart、touchmove、touchend，手機(jī)上并沒有tap
事件。手指觸發(fā)觸摸事件的過程為：touchstart > touchmove > touchend。如下是移動(dòng)端和PC上事件響應(yīng)速度比較。
當(dāng)我們手觸碰屏幕時(shí)，要過300ms左右才會(huì)觸發(fā)mousedown事件，所以click事件在手機(jī)會(huì)有300ms的延遲。
由于移動(dòng)端的touch的事件執(zhí)行順序：
touchstart>touchmove>touchend>mousedown>mouseup>click
穿透問題變得理所當(dāng)然了。因?yàn)檫@是瀏覽器的默認(rèn)行為
解決方案
遮擋
pointer-events
fastclick
參考
[1] 徹底解決tap“點(diǎn)透”，提升移動(dòng)端點(diǎn)擊響應(yīng)速度
[2] javascript事件機(jī)制詳解（涉及移動(dòng)兼容）
[3] 也來說說touch事件與點(diǎn)擊穿透問題
[4] 由移動(dòng)端頁面點(diǎn)擊穿透想到的
