1.3移动端点击事件－－－tap点透事件

点透现象有两种：
1.事件冒泡：
点击蒙层A,如果下面有一个B（button按钮／a标签／input等）。tap点击A后，下方元素如果绑定了click事件的话，事件会被触发。

原因：

zepto的tap是通过事件代理实现的，即document上绑定了touch事件，通过事件冒泡触发tap事件。
点击完成时的tap事件(touchstart \ touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，这就是常出现的“点透”的情况。

解决方案：

A.addEventListener('touchend', function(e) {
    e.preventDefault();
  });

2.A B有层级关系，点击A后A消失

点透.gif

原因：

当手指触摸到屏幕的时候，会触发两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从Dom Tree上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.

解决方案：

setTimeout(function(){
      A.style.display = 'none';
    }, 300);

有的人说 当A z-index大于B时也会触发点透，但是我用手机和浏览器去测试没发现