什么是事件穿透?
點擊上面的一層時會觸發下面一層的事件
”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(){...})