对Tap事件和Tap点透原理的分析

首先介绍tap事件：

1. tap事件的意义：在移动端，click事件会有300ms延迟，因为浏览器通过判断300ms内是否会继续点击，来判断是否缩放网页。（即双击放大网页的效果有一个300ms的时间来判断，300ms过去了，才会触发click事件）

2. tap事件的实现：使用浏览器默认支持的touch事件来模拟，根据touchstart、touchmove、touchend这三个事件进行模拟tap事件，达到封装tap事件的效果。下面的代码是我做的一个简易的封装。

//定义tap函数，传入需要绑定的元素，和一个回调函数function tap(el,callBack){
        VAR startTime = 0;
        var maxTime = 250;
        var [startX,startY,endX,endY] = [0,0,0,0];
 //es6解构赋值    el.addEventListener('touchstart',function(e){
                                        console.LOG('touchstart');
            startTime = Date.now();
     //开始触摸的事件          startX = e.touches[0].clientX;
     //手指在浏览器横坐标        startY = e.touches[0].clientY;
 //手指在浏览器纵坐标    }
)    el.addEventListener('touchmove',function(e){
            console.log('touchmove');
            endX = e.touches[0].clientX;
     //手指在浏览器横坐标        endY = e.touches[0].clientY;
 //手指在浏览器纵坐标    }
)    el.addEventListener('touchend',function(e){
            console.log('touchend');
            if( (Date.now()-startTime) >
 maxTime){
     //如果超过了最大时间，不触发tap               console.log('超时了');
                return ;
         }
            //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。        if(Math.abs(endX-startX) >
     1000 || Math.abs(endY-startY) >
 1000){
                 return;
        }
            callBack(e);
     }
)}
tap(document.documentElement,function(e){
        console.log(e);
}
    );
    

梳理一下：tap事件的顺序就是 touchstart -> touchmove -> touchend -> 在touchend中执行回调

tap点透的原理：

1. 常见到有这种应用场景，点击遮罩层，遮罩层消失，露出底部的页面。当底部的页面中某个元素绑定了click事件，并且点击遮罩的时候正好点的是该元素的位置，会发现该元素的click事件被触发了。

2. click在PC端触发顺序是mousedown -> mouSEMove -> mouseup -> click这个顺序来执行的，在移动端触发顺序是touchstart -> touchmove -> touchend -> click这个顺序执行。因为在touchend的时候我们的遮罩已经消失了，所以相当于点击到了底部页面中的元素。所以底部元素会触发click事件。

tap点透的解决方案：

1. 统一使用tap事件，或者click事件。

2. 延迟遮罩层消失的时间，使其超过300ms

3. 拿个透明遮罩挡住（不推荐，太笨了，还麻烦）

4. 使用fastclick库

相关推荐：

HTML5新增属性：五种全局属性的介绍

以上就是对Tap事件和Tap点透原理的分析的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！