点击穿透，又被称为是穿透点击，是一种在移动端开发中常见的问题，尤其在使用弹出层或悬浮层时的时候，例如弹窗、对话框等操作中，当用户点击弹出层或悬浮层上的按钮后，事件不仅被弹出层捕获，还会“穿透”到它下方的界面，触发底层控件的点击事件。这种情况有可能会导致一些意外的操作，会严重影响到用户体验。

点击穿透的成因

形成点击穿透的原因主要有如下几个。

• 事件冒泡机制：在事件操作从子元素传递到父元素的过程中，点击事件有可能会先被弹出层捕获，然后继续传递到其背后的界面上。
• 布局绘制顺序：在弹出层的视觉上看是有遮盖底层页面的内容，但从系统的事件处理的角度上来看，它可能没有真正拦截事件。

上面的两种情况都有可能会造成点击穿透的情况发生，那么如何解决点击穿透的问题呢。下面我们就来详细介绍一下。

常见的解决方法

禁用背景点击事件

我们可以给弹出层的背景部分设置点击事件，然后让这个点击事件不出现冒泡的情况，这样可以阻止事件传递到下层视图中，如下所示。

document.querySelector('.overlay').addEventListener('click', function(event) {
    event.stopPropagation();  // 阻止事件冒泡
});

在移动端开发中我们可以通过，如下的方式来实现。

popupWindow.setOutsideTouchable(false);  // 设置弹窗外部不可点击

给弹出层的背景设置setOnTouchListener，并在onTouch中返回true，以防止点击事件传递到下层。

延迟处理事件

在一些移动设备中，在进行程序渲染的过程中，可能会发生短暂的渲染延迟。当我们点击弹出层的时候，底层的元素有可能还没有完全被屏蔽，因此，使用少量延迟可以帮助系统正确渲染并阻止穿透问题。如下所示。

setTimeout(function() {
    // 弹窗显示后延迟处理
}, 300);  // 延迟300ms后处理

使用setTimeout函数来实现延迟处理的操作。

使用标志位（Flag）

当然，我们还可以通过在点击弹出层时，来设置一个标志位来记录该点击事件，然后通过该标志位阻止事件传递到下层，如下所示。

let isClicking = false;
document.querySelector('.popup').addEventListener('click', function(event) {
    isClicking = true;  // 设置标志位
});
document.querySelector('.base-layer').addEventListener('click', function(event) {
    if (isClicking) {
        event.stopPropagation();  // 阻止底层被点击
        isClicking = false;       // 重置标志位
    }
});

遮罩层（Modal 或 Transparent Layer）

当然我们也可以在弹出层的底层在添加一个全屏透明的遮罩层，这个遮罩层只负责拦截点击事件，而不显示任何内容。这样即使用户点击了弹出层区域之外，也不会触发底层元素的点击事件，如下所示。

<div class="mask"></div>
<div class="popup"></div>

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);  /* 全透明 */
    z-index: 999;  /* 弹出层下方 */
}

总结

通过上面介绍的这集中实现方式，我们可以有效的避免点击穿透的问题，从而提升应用程序的用户体验。