zepto中tap事件的点透问题

1. 前言

最近发现很多人遇到了zepto中tap点透的问题，网上查阅了很多的资料，并没有发现很好的文章，正好最近在做移动端网站的开发，整理如下。

2. 什么是点透现象（ What）

其实点透的出现场景可以总结如下：
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。（这一点很重要）
3.B元素本身有默认click事件（如a标签） 或 B绑定了click事件。
在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

 <!-- html --> 
 <a href="http://www.baidu.com">点击跳转到百度</a>
 <div class="modal"></div>

/*css*/
 .modal {
     position: absolute;
     top: 0;
     left: 0;
     width: 200px;
     height: 100px;
     background-color: rgba(255,0,0,0.5);
 }

 /*JavaScript*/
 <script src="./node_modules/zepto/dist/zepto.js"></script>
 <script src="./node_modules/zepto/src/touch.js"></script>
 <script>
    Zepto(function($){
       $(".modal").on("tap",function(){
          $(this).hide();
       })
    })
 </script>

注意：这里引入的touch.js模块不在zepto.js模块中，需要单独引入，可以使用npm下载zepto，在src文件夹中就可以找到touch.js

效果如图

当在文字上方点击模态窗时，模态窗隐藏，但是a标签同时也被触发，发生跳转

这就是点透现象。

3. 点透现象出现的原因（Why）

为什么会有tap事件？

click 和 tap两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以用tap代替click作为点击事件。

分析zepto的源码我们发现，zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的，再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用 户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)，所以在执行完tap事件之后，弹出来的模态窗马 上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的 元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或 者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

4. 解决办法（How）

（1）引入fastclick库

github上fastclick库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

$(function(){
    FastClick.attach(document.body);
})

然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。

（2）为元素绑定touchend事件，并在内部加上e.preventDefault();

$(".modal").on( 'touchend' , function (e){ 
    //改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault(); //阻止“默认行为”
})

（3）延迟一定的时间(300ms+)来处理事件

 $("#aa").on("tap", function (event) {
     setTimeout(function(){
        //很多处理比如隐藏什么的
     },320);
 });

此方法可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果。

4. 总结

个人比较倾向于引入fastclick.js，用着比较习惯。还有网友表示，最新的zepto版本修复了tap的点透现象，这里用的是zepto的最新版本（v1.2.0）做测试，并没有发现修复该问题。