pcl 解決 lose info click事件 con 聚焦 sdn 底層

當兩個層重疊在一起時，或是有個彈窗，使用Zepto的tap事件時，點擊上面的一層時會觸發下面一層的事件，特別是底層如果是input框時，必“穿 透”，

現象原因：

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的庫；

2、監聽touchend事件，並在事件中使用preventDefault()阻止冒泡；

$(".js-egg-close").on("touchend

", function(e){ //這裏使用touchstart事件也是可以的，
e.preventDefault();
$(‘.sec_dlg_eggs‘).remove();
$(".eggs_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(){})

Zepto tap 穿透bug、解決移動端點擊穿透問題