本文摘自PHP中文网,作者不言,侵删。
这篇文章给大家介绍的文章内容是关于对Tap事件和Tap点透原理的分析,有很好的参考价值,希望可以帮助到有需要的朋友。首先介绍tap事件:
tap事件的意义:在移动端,click事件会有300ms延迟,因为浏览器通过判断300ms内是否会继续点击,来判断是否缩放网页。(即双击放大网页的效果有一个300ms的时间来判断,300ms过去了,才会触发click事件)
tap事件的实现:使用浏览器默认支持的touch事件来模拟,根据touchstart、touchmove、touchend这三个事件进行模拟tap事件,达到封装tap事件的效果。下面的代码是我做的一个简易的封装。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
梳理一下: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库
相关推荐:
HTML5新增属性:五种全局属性的介绍
canvas原生实现前端网页移动端签名以上就是对Tap事件和Tap点透原理的分析的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者