移动端web开发中对点透的处理，以及理解fastclick如何做到去除300ms延迟

 一、点透问题以及处理办法

开发中遇到一个问题，就是点击layer弹出框的取消按钮之后，按钮下方的click事件就直接触发了。直接看代码：

$('.swiper-slide').on('click',function(){               
         window.location.href=url;       
});
 timer_1=setTimeout(function(){ 
         layer.open({
               content:'我是一个弹框',
               btn:['下载','取消'],
               yes:function(){
                        window.location.href=url; 
                    }         
               });
 },3000);   

点击取消按钮之后，页面直接执行前面的click事件，页面直接跳转了。一开始以为是layer的原因，一直调试，后来发现，原来所谓的“点透”问题。

这就尴尬了，我只是想简单的取消，并没有想跳转啊。解决办法如下，代码改成如下：

$('.swiper-slide').on('click',function(){               
       setTimeout(function(){
                window.location.href=url; 
        },300);          
});

主要思想就是延迟300ms来处理这个事件，这就解决了。但是这又有一个问题，增加了没有必要的300ms。

 

二、看看其他

1、采用touchend　代替tap

$('.closeBtn').on('touchend',function(e){
　　event.preventDefault();
　　/*do something*/
});

2、使用fastclick

可以处理点透问题，同时去掉了300ms延迟。

《fastclick》

三、fastclick原理

触发时间先后顺序：touchstart  > touchend > click

看上面github上面的代码，就是在touchstart 和touchend之间的时间内（大约是50ms~150ms）内，直接触发元素得click事件（提前），然后就返回了。真正的click事件（300ms）之后的，没有被执行；

同是它还执行了e.preventDefault()，这样就防止了点透的发生。

四、再看看zepto的tab事件

tab事件也是通过touchstart 和touchend模拟出来的，但是tab事件不能很好的阻止点透，因为他在里面加上了时间延迟机制(导致为什么先alert("click"))，导致e.preventDefault()，没法执行。

//哪个先？
$("#test").tap(function (e) {
      alert("tap");
}).click(function(e)
      alert("click");
 });

解决办法：添加

$("#test").on("touchend", function (event) {
     event.preventDefault();
 });