移动端tap事件穿透

2019独角兽企业重金招聘Python工程师标准>>>

 对于移动端穿透bug，可能很多移动web开发的童靴都深有体会，到底何为穿透现象呢？ 就是当两个层重叠在一起时，或是有个弹窗，使用Zepto的tap事件时，点击上面的一层时会触发下面一层的事件。

   尤其是底层如果是input框时，必“穿 透”，“google”说原因是“tap事件实际上是在冒泡到body上时才触发”，也就是Zepto的tap事件是绑定在document上的，所以会导致，这个暂未求证。

如下图， 当点击关闭按钮，如果下面有商品a链接，则会穿透（关闭的同时，触发了链接）；

 

现象原因：
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代码 

 

1. $(".js-egg-close").on("touchend", function(e){  //这里使用touchstart事件也是可以的，  
2.     e.preventDefault();  
3.      $('.sec_dlg_eggs').remove();  
4.      $(".eggs_bg").remove();  
5. });  

 

3、使用css3的pointer-events=true,pointer-events=none切换来实现；

4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透，与jquery的动画(fadeIn()，fadeOut())等配合，个人感觉良好;
$(id).fadeIn(300);

5.如果还不奏效，终极解决方案是用click提代tap;
设置点击事件为_tap

Js代码 

 

1. _tap = touchend in document ? "touchend":"click"  

 这样在执行的过程中就可以直接调用div.on(_tap, function(){})

转载于:https://my.oschina.net/zhangyaxin/blog/877065