如何停止重叠 div 以相互交互单击事件

在 web 开发中，我们经常会遇到多个 div 重叠在同一位置的情况，如果这些 div 都有单击事件，那么就会出现多个事件同时被触发的情况，这会影响用户体验。本文会介绍如何防止重叠 div 的单击事件相互交互。

方案一：利用事件委托

事件委托是指将事件绑定到父元素上，通过事件冒泡机制，在父元素上捕获到子元素的事件，从而达到绑定子元素事件的目的。利用事件委托，可以避免重叠 div 相互干扰，示例代码如下：

<div id="parent">
  <div class="overlap" data-index="1"></div>
  <div class="overlap" data-index="2"></div>
  <div class="overlap" data-index="3"></div>
</div>

<script>
  const parent = document.getElementById('parent');
  parent.addEventListener('click', (event) => {
    const target = event.target;
    if (!target.classList.contains('overlap')) {
      return;
    }
    const index = target.dataset.index;
    console.log(`click overlap ${index}`);
  });
</script>

在上述示例中，给父元素 parent 绑定了单击事件，通过 event.target 获取实际点击的元素，判断是否为 overlap 元素，如果是，则执行相应的逻辑。

方案二：利用 CSS z-index 属性

CSS z-index 属性用于设置元素的层级，层级越高的元素会覆盖在层级较低的元素之上。利用 z-index 属性，可以将重叠在同一位置的 div 层级区分开来，示例代码如下：

<div class="overlap" style="z-index: 1;"></div>
<div class="overlap" style="z-index: 2;"></div>
<div class="overlap" style="z-index: 3;"></div>

在上述示例中，通过设置不同的 z-index 值，可以让不同的 div 互不影响。但是需要注意的是，z-index 值需要设置为整数，值越大层级越高，同时需要保证层级不要过多，避免影响性能。

以上是两种常用的方法，这两种方法都可以有效避免重叠 div 的单击事件相互交互，开发者可以根据需要选择适合自己的方案。