点击穿透

点击穿透

点击穿透

  • 点击穿透 是移动端web问题。
  • 始于移动端较pc上的特殊功能:双击( double tap)事件和长按事件(Long Press)。当用户点击click屏幕后,需要等待300ms后才能判断用户是否进行了双击操作或者长按操作,该延迟造成了点击穿透。同时由于事件冒泡,点击事件由于延迟可能会冒泡到其他DOM节点,所以事件冒泡也是点击穿透的另外一个辅助成因。
  • 本文主要介绍点击穿透,并不是解决移动端的点击延迟问题,点击延迟是的解决方案是使用touch模拟tap事件。

点击穿透如何引起?


移动端click事件延迟

在移动端页面中click的点击事件有300ms的延迟,在执行完 touch事件之后,目标事件执行,此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候,click 到的其实是隐藏元素下方的元素。如果click的正下方有元素有click事件(包括a标签)或者input输入框,最后触发下层的click或获取焦点弹出软键盘等,即点击穿透。

移动端事件touch

PC响应的是鼠标事件,包括mousedownmouseupmousemoveclick事件。触发过程为:mousedown > mouseup > click

移动端用触摸事件去实现类似PCS上鼠标的功能。touch事件包含touchstarttouchmovetouchend,手机上并没有tap
事件。手指触发触摸事件的过程为:touchstart > touchmove > touchend。如下是移动端和PC上事件响应速度比较。

移动端和PC上的事件响应速度比较(来自网络,侵删)

当我们手触碰屏幕时,要过300ms左右才会触发mousedown事件,所以click事件在手机会有300ms的延迟。

由于移动端的touch的事件执行顺序:

touchstart > touchmove > touchend > mousedown > mouseup > click

穿透问题变得理所当然了。因为这是浏览器的默认行为

解决方案


遮挡

pointer-events

fastclick


参考

[1] 彻底解决tap“点透”,提升移动端点击响应速度
[2] javascript事件机制详解(涉及移动兼容)
[3] 也来说说touch事件与点击穿透问题
[4] 由移动端页面点击穿透想到的

经不住似水流年  逃不过此间少年
0%