189 8069 5689

什么是Tap事件和Tap点透原理-创新互联

今天就跟大家聊聊有关什么是Tap事件和Tap点透原理，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联是一家成都网站建设、网站制作，提供网页设计，网站设计，网站制作，建网站，按需开发，网站开发公司，公司2013年成立是互联行业建设者，服务者。以提升客户品牌价值为核心业务，全程参与项目的网站策划设计制作，前端开发，后台程序制作以及后期项目运营并提出专业建议和思路。

首先介绍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库

看完上述内容，你们对什么是Tap事件和Tap点透原理有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：什么是Tap事件和Tap点透原理-创新互联
标题URL：http://cdxtjz.cn/article/djcgic.html

其他资讯