点击穿透

点击穿透

点击穿透

• ** 点击穿透 是移动端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响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。触发过程为：mousedown > mouseup > click。

移动端用触摸事件去实现类似PCS上鼠标的功能。touch事件包含touchstart、touchmove、touchend，手机上并没有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] 由移动端页面点击穿透想到的