点击穿透
点击穿透（Click Through）是一个在前端开发中常见的问题，特别是在处理移动端或触屏设备的交互时。它通常发生在用户点击一个浮层（如弹窗、下拉菜单等）的关闭按钮时，由于某些原因，点击事件不仅触发了浮层的关闭，还“穿透”到了浮层下方的页面元素上，导致该元素也被点击。
原因分析
点击穿透问题在移动端尤为常见，这主要是因为触屏设备为了区分用户的双击缩放操作，对 click 事件做了 300ms 的延迟触发。具体流程如下：
- touchstart：手指触碰到屏幕时触发。
- touchmove（可选）：手指在屏幕上移动时触发。
- touchend：手指离开屏幕时触发。
- click（延迟 300ms 后）：如果在这 300ms 内没有新的触摸事件，浏览器会在 touchend 发生的位置触发 click 事件。
如果浮层在 touchstart 或 touchend 时就被关闭，而用户的手指在 touchend 后仍然停留在屏幕上，那么 300ms 后触发的 click 事件就可能落在浮层下方的元素上，导致点击穿透。
解决方案
针对点击穿透问题，可以采取以下几种解决方案：
- 使用 touchstart 代替 click：
将浮层关闭的事件绑定到 touchstart 上，而不是 click。这样可以确保在用户手指离开屏幕时浮层就已经关闭，从而避免 click 事件的触发。
- 阻止默认事件：
在 touchstart 或 touchend 事件中调用e.preventDefault()来阻止默认事件的进一步传播，包括后续的 click 事件。
- 延长浮层关闭时间：
通过 CSS 动画或 JavaScript 延时函数（如 setTimeout）来延长浮层关闭的时间，确保在 click 事件触发前浮层仍然可见。这样，即使 click 事件被触发，也会落在浮层上而不是下方的元素上。
- 使用 pointer-events：
对于不需要响应点击事件的浮层背景或遮罩层，可以设置 CSS 属性pointer-events: none;。这样，这些元素就不会成为点击事件的目标，从而避免点击穿透。但需要注意的是，IE 浏览器不支持此属性。
- 优化事件处理逻辑：
确保事件处理逻辑的正确性，避免在浮层关闭后立即触发下方元素的点击事件。可以通过添加标志位或使用事件委托等方式来优化事件处理逻辑。
- 引入第三方库
FastClick 是专门未解决移动端浏览器 300ms 点击延迟和点击穿透问题所开发的一个轻量级的库。FastClick 实现原理是在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即发出模拟一个 click 事件，并把浏览器在 300ms 之后的 click 事件阻止掉。
综上所述，点击穿透问题是一个需要开发者注意的问题，特别是在移动端开发中。通过合理的解决方案，可以有效地避免这一问题的发生，提升用户体验。