div容器无法捕获点击事件？JavaScript事件传播问题求助

我原本以为自己懂JavaScript事件传播机制，结果实际操作发现不是那么回事。我想让id为container的div容器捕获点击事件，同时不让其子元素接收该事件，但不管把addEventListener的第三个参数设为true还是false，都没法改变事件行为。

原始测试代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
  <body>
    <div id="container" style="padding: 10px; border: 1px solid black;">
      <div id="child1" style="margin: 10px; background-color: chartreuse;">
        child1 content
      </div>
      <div id="child2" style="margin: 10px; background-color: aqua;">
        child2 content
      </div>
    </div>
    <script>
      document.getElementById("container").addEventListener('click', (e) => {
        console.log(e);
      }, false) // true don't change behavior
    </script>
  </body>
</html>

点击子元素时，事件目标是子元素而非容器，事件既没被容器捕获，也没被子元素冒泡传递。我自己写了个解决方案，但太繁琐了：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
  <body>
    <div id="container" style="padding: 10px; border: 1px solid black;">
      <div id="child1" style="margin: 10px; background-color: chartreuse;">
        child1 content
      </div>
      <div id="child2" style="margin: 10px; background-color: aqua;">
        child2 content
      </div>
    </div>
    <script>
      document.getElementById("container").addEventListener('click', (e) => {
        if (e.target.getAttribute('id') == 'container') {
          console.log('ok');
        }
        else {
          console.log('ko');
          !e.target.parentElement.dispatchEvent(new MouseEvent("click"));
        }
      }, false)
    </script>
  </body>
</html>

更简洁的解决思路 #

方案1：利用currentTarget判断+阻止事件传播

绑定容器的点击事件时，通过e.currentTarget（绑定事件的元素，即容器）和e.target（实际点击的元素）的对比，判断是否点击了子元素，随后阻止事件继续传播，同时执行容器的逻辑：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
  <body>
    <div id="container" style="padding: 10px; border: 1px solid black;">
      <div id="child1" style="margin: 10px; background-color: chartreuse;">
        child1 content
      </div>
      <div id="child2" style="margin: 10px; background-color: aqua;">
        child2 content
      </div>
    </div>
    <script>
      const container = document.getElementById("container");
      container.addEventListener('click', (e) => {
        // 点击子元素时阻止事件传递
        if (e.target !== e.currentTarget) {
          e.stopPropagation();
        }
        // 统一执行容器的点击逻辑
        console.log('容器捕获到点击事件');
      }, true); // 设为true在捕获阶段触发，更早拦截事件
    </script>
  </body>
</html>

方案2：CSS直接禁用子元素指针事件

如果子元素不需要响应任何指针交互（比如点击、 hover），可以用CSS的pointer-events: none让子元素直接忽略指针事件，点击子元素时事件会直接触发容器的监听：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
      #container > * {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div id="container" style="padding: 10px; border: 1px solid black;">
      <div id="child1" style="margin: 10px; background-color: chartreuse;">
        child1 content
      </div>
      <div id="child2" style="margin: 10px; background-color: aqua;">
        child2 content
      </div>
    </div>
    <script>
      document.getElementById("container").addEventListener('click', () => {
        console.log('容器捕获到点击事件');
      });
    </script>
  </body>
</html>

方案3：给子元素绑定阻止事件的监听

如果需要保留子元素的部分交互，仅阻止点击事件传递，可以给所有子元素单独绑定点击事件并阻止传播：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  </head>
  <body>
    <div id="container" style="padding: 10px; border: 1px solid black;">
      <div id="child1" style="margin: 10px; background-color: chartreuse;">
        child1 content
      </div>
      <div id="child2" style="margin: 10px; background-color: aqua;">
        child2 content
      </div>
    </div>
    <script>
      const container = document.getElementById("container");
      container.addEventListener('click', () => {
        console.log('容器捕获到点击事件');
      }, true);

      // 遍历所有子元素，阻止点击事件传播
      container.querySelectorAll('*').forEach(child => {
        child.addEventListener('click', (e) => {
          e.stopPropagation();
        }, true);
      });
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Michel Lejeau