聊聊click延遲和點擊穿透

博客原文地址：Claiyre的我的博客 https://claiyre.github.io/
如需轉載，請在文章開頭註明原文地址

移動端click事件被延遲

移動端的開發常常須要監聽用戶的雙擊行爲，因此在touchend事件以後會有300ms左右的延遲，用來判斷是否有雙擊事件。

由於這種延遲，因此咱們在移動端一般不監聽click事件。

移動端的事件的發生順序是這樣的：touchstart---touchmove---touchend,而後大約過300ms觸發click事件

tap事件

zepto這個庫解決click延遲的思路是：自定義tap事件，當用戶點擊元素時，touchend事件會先於click發生，當touchend冒泡到document時觸發目標元素的tap事件
因此咱們能夠經過監聽tap事件代替監聽click事件。
但須要注意的是，tap事件並非

點擊穿透

在咱們常見的彈出層這種狀況下，點擊關閉彈出層時可能會發生穿透現象。
那爲何會出現點擊穿透這種現象呢

由於當tap事件發生時，上層遮罩層關閉，此時事件只進行到了touchend,而click大約在300ms後才觸發，當click觸發時，上面的遮罩層已經消失，這就至關於點擊了到了下層的元素

若是這個元素綁定了click事件，或者有默認的點擊行爲，好比a標籤和input等等，那麼就會觸發他們的click行爲。
這就是點擊穿透事件。

如何解決點擊穿透

1.直接將上層的tap事件換成click
代價就是有300ms的延遲，但畢竟這個按鈕用戶也就關閉時點一下，因此影響不大

2.在click事件發生前阻止它
具體作法是在touchend的事件處理函數中使用e.preventDefault()來阻止後續的click事件。

3.使用css3的一個新特性：pointer-events
pointer-events:none 能夠完全屏蔽鼠標事件，因此能夠給點擊按鈕這個屬性，而後就能夠放心大膽地使用tap事件或者touchend啦

參考文章：

1. http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

2. http://www.javashuo.com/article/p-amypmlne-db.html

3. https://github.com/mattt/MsgPackSerialization/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick%E5%BB%B6%E8%BF%9F%E5%8F%8Azepto%E7%9A%84%E7%A9%BF%E9%80%8F%E7%8E%B0%E8%B1%A1