今天就跟大家聊聊有关什么是Tap事件和Tap点透原理,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联建站主要从事网站建设、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务新华,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
首先介绍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库
看完上述内容,你们对什么是Tap事件和Tap点透原理有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
当前文章:什么是Tap事件和Tap点透原理
浏览地址:https://www.cdcxhl.com/article16/ipcgdg.html
成都网站建设公司_创新互联,为您提供网站收录、ChatGPT、云服务器、网站营销、网站内链、品牌网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联