手機端 zepto tap事件穿透

什麼是事件穿透？

點擊上面的一層時會觸發下面一層的事件

」google」說緣由是「tap事件其實是在冒泡到body上時才觸發」，也就是Zepto的tap事件是綁定在document上的，因此會致使

 

現象緣由：
zepto的tap經過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的，再點擊完成時的tap事件(touchstart\touchend)須要冒泡到document上纔會觸發，而在冒泡到document以前，用 戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發click事件的,由於click事件有延遲觸發(這就是爲何移動端不 用click而用tap的緣由)(大概是300ms,爲了實現safari的雙擊事件的設計)，因此在執行完tap事件以後，彈出來的選擇組件馬 上就隱藏了，此時click事件還在延遲的300ms之中，當300ms到來的時候，click到的其實不是完成而是隱藏以後的下方的元素，若是正下方的 元素綁定的有click事件此時便會觸發，若是沒有綁定click事件的話就當沒click，可是正下方的是input輸入框(或者select選擇框或 者單選複選框)，點擊默認聚焦而彈出輸入鍵盤，也就出現了上面的點透現象。

 

具體解決方案以下：
1)  使用github上有一個叫作fastclick的庫來替代Zepto的tap事件；

2)  監聽touchend事件，並在事件中使用preventDefault()阻止冒泡；
//JS代碼
$(".js-close").on("touchend", function(e){  //這裏使用touchstart事件也能夠
    e.preventDefault();
    $('.sec_ui_dlg').remove();
    $(".dlg_bg").remove();
});

3)  使用css3的pointer-events=true,pointer-events=none切換來實現；

4)  延遲必定的時間來處理事件。本人測試是超過320毫秒就不會出現穿透，與jquery的動畫(fadeIn()，fadeOut())等配合，感受良好;
$(id).fadeIn(300);

5)  若是還不奏效，終極解決方案是用click提代tap;
//設置點擊事件爲_tap
_tap = touchend in document ? "touchend":"click"  
//這樣在執行的過程當中就能夠直接調用
div.on(_tap, function(){...})