移动端点透问题及解决方案

1. 点透场景

层A 覆盖在层B上面，常见的有对话框等，层A用 touchstart 或者tap(zepto)事件点击进行隐藏或者移开，由于click晚于touchstart，超过300ms，当层A隐藏后，click到的是下面的层B，此时层B的click事件会触发，或者其上的a链接会跳转，input，select会吊起键盘。

2. zepto的tap事件原理

zepto的 tap 事件是通过 touchstart , touchend (android 4.0.x不支持touchend，通过touchmove 设置定时器触发touched)模拟出来的，事件是绑定在document上，大体思路是在touchstart的时候向对象附加点击的x,y；（其中还包含很多细节，比如设置最后点击时间，设置长按定时器等);touchmove的过程动态的计算手势在view上的偏移点，最后touchend 根据偏移点确定是否是点击，如果是点击动态的构建一个event然后根据设置的状态获取是单机、双击。

非zepto的tap事件未必会出现点透问题。

3. 点透解决方案

1. 来得很直接github上有个fastclick可以完美解决 https://github.com/ftlabs/fastclick

   引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

   window.addEventListener( "load", function() {
       FastClick.attach( document.body );
   }, false );
   

2. 用touchend代替tap事件并阻止掉touchend的默认行为preventDefault(),因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉

   $("#cbFinish").on("touchend", function (event) {
       //很多处理比如隐藏什么的
       event.preventDefault();
   });
   

3. 利用touch事件模拟click，延迟一定的时间(300ms+)来处理事件

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

   这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果

4. 直接用click，不考虑延迟，

5. 下层避开click事件，如a链接改为span等标签，使用js跳转页面