对于手机网站开发的童靴对 touch事件穿透bug深有体会,那么到底何为穿透现象、穿透又是如何产生的呢?  当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件。 尤其是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也是Zepto的tap事件是绑定在document上的,所以会导致,这个童靴们可以测试下啦。
  如下图, 当点击关闭按钮,如果下面有商品a链接,则会穿透(即点击关闭的同时,触发了链接)

  现象原因:
  zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart ouchend)需要冒泡到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(){...})