移動端點透問題及解決方案

---

1. 點透場景

層A 覆蓋在層B上面，常見的有對話框等，層A用 touchstart 或者tap(zepto)事件點擊進行隱藏或者移開，由於click晚於touchstart，超過300ms，當層A隱藏後，click到的是下面的層B，此時層B的click事件會觸發，或者其上的a鏈接會跳轉，input，select會弔起鍵盤。

2. zepto的tap事件原理

zepto的 tap 事件是通過 touchstart , touchend (android 4.0.x不支持touchend，通過touchmove 設置定時器觸發touched)模擬出來的，事件是綁定在document上，大體思路是在touchstart的時候向對象附加點擊的x,y；（其中還包含很多細節，比如設置最後點擊時間，設置長按定時器等);touchmove的過程動態的計算手勢在view上的偏移點，最後touchend 根據偏移點確定是否是點擊，如果是點擊動態的構建一個event然後根據設置的狀態獲取是單機、雙擊。

非zepto的tap事件未必會出現點透問題。

3. 點透解決方案

1. 來得很直接github上有個fastclick可以完美解決 https://github.com/ftlabs/fastclick

   引入fastclick.js，因爲fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上

   window.addEventListener( "load", function() {
       FastClick.attach( document.body );
   }, false );
   

2. 用touchend代替tap事件並阻止掉touchend的默認行爲preventDefault(),因爲觸發touchend需要200ms所以可以把觸發時間這個原理問題解決掉

   $("#cbFinish").on("touchend", function (event) {
       //很多處理比如隱藏什麼的
       event.preventDefault();
   });
   

3. 利用touch事件模擬click，延遲一定的時間(300ms+)來處理事件

   $("#cbFinish").on("tap", function (event) {
       setTimeout(function(){
       //很多處理比如隱藏什麼的
       },320);
   });   
   

   這種方法其實很好，可以和fadeInIn/fadeOut等動畫結合使用，可以做出過度效果

4. 直接用click，不考慮延遲，

5. 下層避開click事件，如a鏈接改爲span等標籤，使用js跳轉頁面