解决重叠Div点击事件穿透问题

假设有三个div，这三个div重叠在了一起，但是只有第二层div上有点击事件，怎样可以通过点击这个位置，不受第三层div的影响，成功点击到事件.

解决重叠 Div 的点击事件穿透问题，以下是几种解决方案： 

方法一：使用 pointer-events 属性

//css
.top-div {
  pointer-events: none; /* 使顶层 div 不拦截点击事件 */
}

这样点击会穿透顶层 div 到达中间层。

方法二：调整 z-index

//css
.middle-div {
  z-index: 2;
  position: relative; /* 需要设置定位属性 */
}
.top-div {
  z-index: 1; /* 确保顶层 div 的 z-index 低于中间层 */
}

方法三：JavaScript 事件委托

//javascript
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('middle-div')) {
    // 处理中间层点击事件
  }
}, true); // 使用捕获阶段

方法四：检查点击元素

//javascript
document.querySelector('.top-div').addEventListener('click', function(e) {
  if (e.target === this) {
    // 如果点击的是顶层 div 本身而不是其子元素
    document.querySelector('.middle-div').click();
  }
});

最佳实践

通常最简单有效的方法是使用 `pointer-events: none` 让顶层 div 不拦截点击事件：

//html
<style>
  .top-div {
    pointer-events: none;
  }
  .middle-div {
    /* 你的样式 */
  }
</style>

<div class="bottom-div"></div>
<div class="middle-div"></div>
<div class="top-div"></div>

这样点击会直接穿透顶层到达中间层触发点击事件。