點透

點透

現象

click事件在移動端有300ms延遲,這是爲了區分雙擊放大因此（300ms延遲緣由 | 譯文）

移動端用zepto框架(≈jquery，可是更輕量級)

zepto編譯進touch模塊(zepto在線定製化模塊)，能夠用tap代替click解決延遲問題

可是隨之而來的問題是點透

點透現象(手機 || 電腦手機視圖&&touch screen 打開)點擊重合區域便可再現點透現象。

分析

zepto touch.js源碼

touch模塊綁定事件touchstart,touchmove和touchend到document.body上，而後經過計算touch事件觸發的時間差，位置差來實現了自定義的tap,swipe

tap事件冒泡到body上才觸發，注意用戶手接觸屏幕和離開屏幕會先觸發click事件，因此tap事件完成以後，延遲的click事件觸發

表如今#c消失以後，click事件就觸發了下層有click事件的#p上

PS：只有在被觸發時，當前有click事件的元素顯示，且在面朝用戶的最前端時，才觸發click事件

解決方案

1.

fastclick

有關fastclick的老文 | 譯文

原理是在目標元素上綁定touchstart ,touchend事件，而後在touchend結束的時候立馬執行click事件，這樣就解決了「點透」的問題（實質是事件冒泡致使）

方便之處在於：使用簡單，依然用click，不用tap、也就zepto+touch、不只解決了移動端click延遲的問題、input聚焦問題神馬的也都解決了

2.

touchend+e.preventDefault()

• touchend： 優先於下面的#p捕獲的事件(移動端點擊事件觸發順序 各個手機終端不盡相同，可是touchend都砸click以前)
• preventDefault()： 移動端click的捕獲被認爲和滾屏、點擊輸入框彈起鍵盤等同樣，是一種瀏覽器默認行爲，便可以被event.preventDefault()阻止的行爲

缺點是：雖然能夠解決點透問題，可是會在滑動的時候誤觸

3.

有人想在zepto touch.js tap事件中監聽preventDefault，阻止click事件也不失爲一個好辦法傳送門挖坑改天看

總結：

• tap、touchend、touchstart以後，目標元素消失或出現或移動，其餘綁定了click事件的元素出如今目標區域，就會出現點透
• a連接默認click事件、input、select元素等也都是click聚焦、彈鍵盤
• touchend、touchstart 隨機不觸發、不夠靈敏
• 在安卓4.1+的chrome瀏覽器上，若是在meta viewport中指定頁面不可縮放，則click沒有上述300ms左右的延遲
• 用tap等於放棄了PC
• 最好仍是用fastclick-demo，感覺下

參考

• http://blog.youyo.name/archives/zepto-tap-click-through-research.html
• http://www.cnblogs.com/lilyimage/p/3740668.html
• http://realwall.cn/blog/?p=162