聊聊click延迟和点击穿透

时间:2024-01-04 09:37:14

博客原文地址:Claiyre的个人博客 https://claiyre.github.io/

如需转载,请在文章开头注明原文地址

移动端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啦

参考文章:

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

  2. https://segmentfault.com/a/1190000003848737
  3. 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