聊聊click延迟和点击穿透

isaced 发布于2019-08-22 11:08 / 621人阅读

摘要：移动端事件被延迟移动端的开发经常需要监听用户的双击行为，所以在事件之后会有左右的延迟，用来判断是否有双击事件。但需要注意的是，事件并不是点击穿透在我们常见的弹出层这种情况下，点击关闭弹出层时可能会发生穿透现象。这就是点击穿透事件。

移动端click事件被延迟

移动端的开发经常需要监听用户的双击行为，所以在touchend事件之后会有300ms左右的延迟，用来判断是否有双击事件。

因为这种延迟，所以我们在移动端通常不监听click事件。

移动端的事件的发生顺序是这样的：touchstart---touchmove---touchend,然后大约过300ms触发click事件

tap事件

zepto这个库解决click延迟的思路是：自定义tap事件，当用户点击元素时，touchend事件会先于click发生，当touchend冒泡到document时触发目标元素的tap事件
所以我们可以通过监听tap事件代替监听click事件。
但需要注意的是，tap事件并不是

点击穿透

在我们常见的弹出层这种情况下，点击关闭弹出层时可能会发生穿透现象。
那为什么会出现点击穿透这种现象呢

因为当tap事件发生时，上层遮罩层关闭，此时事件只进行到了touchend,而click大约在300ms后才触发，当click触发时，上面的遮罩层已经消失，这就相当于点击了到了下层的元素

如果这个元素绑定了click事件，或者有默认的点击行为，比如a标签和input等等，那么就会触发他们的click行为。
这就是点击穿透事件。

如何解决点击穿透

1.直接将上层的tap事件换成click
代价就是有300ms的延迟，但毕竟这个按钮用户也就关闭时点一下，所以影响不大

2.在click事件发生前阻止它
具体做法是在touchend的事件处理函数中使用e.preventDefault()来阻止后续的click事件。

3.使用css3的一个新特性：pointer-events
pointer-events:none 可以彻底屏蔽鼠标事件，所以可以给点击按钮这个属性，然后就可以放心大胆地使用tap事件或者touchend啦

参考文章：

http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

https://segmentfault.com/a/1190000003848737

https://github.com/mattt/MsgPackSerialization/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick%E5%BB%B6%E8%BF%9F%E5%8F%8Azepto%E7%9A%84%E7%A9%BF%E9%80%8F%E7%8E%B0%E8%B1%A1

服务器托管云服务器转发和穿透服务器云服务器和穿透服务器云服务器和内网穿透速度云服务器和内网穿透哪个好

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

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

Vue.js 移动端 Web App 点击穿透问题解决方案

摘要：参考博文也来说说事件与点击穿透问题移动页面点击穿透问题解决方案点击穿透原理及解决书籍移动手册以上部分资料搜集整理自网络，如有不对的地方希望及时告知，欢迎大家批评指正，谢谢描述在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。代码...

wums 2019-08-20 18:31 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Nosee 2019-08-19 18:36 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

microelec 2019-08-01 15:24 评论0 收藏0
移动端点击事件全攻略，这里的坑你知多少？

摘要：所以这种情况下是不符合点击事件的定义的。，关于移动端的点击事件总结完了，可能你都没想到一个简单的点击事件会有那么多坑，如果你在工作中可能会涉及到移动端开发的话，相信这篇文章还是值得你点赞和收藏的，毕竟是踩了那么多坑的经验总结。看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都...

Achilles 2019-08-30 15:45 评论0 收藏0