Tap事件和Tap点透原理

IamDLY 发布于2019-08-23 10:26 / 2884人阅读

摘要：梳理一下事件的顺序就是在中执行回调点透的原理常见到有这种应用场景，点击遮罩层，遮罩层消失，露出底部的页面。点透的解决方案统一使用事件，或者事件。

首先介绍tap事件：

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

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点透的原理：

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

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

tap点透的解决方案：

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

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

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

使用fastclick库

GPU云服务器云服务器 tap python tap qos tap linux中tap

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96344.html

“click延时”是怎么来的与自定义tap事件解决“点透”

摘要：早期版本的的就是如此处理的，自定义事件在中触发，解决单击延时的问题。给按钮绑定事件事件执行自定义事件触发上的事件当然实际中肯定要放在其他的事件回调中，不然没办法响应用户操作。 click延时在移动设备上按下手指单击，按先后顺序，依次会发生touchstart->-touchmove（如果有的话）>touchend->mousedown->mousemove（如果有的话）->mouse...

kid143 2019-08-20 14:48 评论0 收藏0
点透问题及解决

摘要：问题封装的事件由和实现，事件在端无效使用中事件在中该版本的点透问题已经解决可以放心使用，但是端仍然无效。一、问题描述实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。二、例子下面通过多种方式来模拟感受点透：<divclass="tap"&...

番茄西红柿 2019-04-23 11:57 评论0 收藏0
移动端-点透问题巧妙解决

摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...

MockingBird 2019-08-22 15:33 评论0 收藏0
移动端-点透的解决方法

摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...

cpupro 2019-08-22 15:31 评论0 收藏0