为什么捕获选项在 addEventListener 中不起作用

Question

我的capture 选项似乎在addEventListener 中不起作用，无论我将其设置为true 还是false，它都会给我相同的控制台结果。

我检查了以下内容：

1. 将once: true 添加到选项对象 - 这有效，但捕获无效
2. 将 capture 替换为 useCapture - 这似乎也不起作用，并且在这两种情况下都没有错误/警告消息
3. 我在网上看到一些（旧的，例如小于 55 的 chrome 版本）浏览器不支持较新的选项，例如 once - 我正在使用 chrome v88 并尝试使用 Safari 打开文件，以防万一它是浏览器- 相关问题

你知道我做错了什么吗？

function handleClick(e) {
  console.log(this.classList.value);
}
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', handleClick, {capture: true}));

.one {
  width: 200px;
  height: 200px;
  background-color: green;
}

.two {
  width: 150px;
  height: 150px;
  background-color: blue;
}

.three {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>

Answer 1

你的代码对我来说很好用：

function handleClick(e) {
  console.log(this.classList.value);
}
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', handleClick, {
  capture: div.classList.contains('capture')
}));

<div class="one capture">
  One
  <div class="two capture">
    Two
    <div class="three capture">
      Three
    </div>
  </div>
</div>

<div class="one bubble">
  One
  <div class="two bubble">
    Two
    <div class="three bubble">
      Three
    </div>
  </div>
</div>

Answer 2

他为我工作，也许你看到相同的结果，没错，但捕获改变了它的顺序。

如果您使用capture: true，则输出为：

one two three

如果capture: false，则输出为：

three two one

function handleClick(e) { console.log(this.classList.value);}

const divs = document.querySelectorAll('div');

divs.forEach(div => div.addEventListener('click', handleClick, {capture: false}));

main div {
    height: 100px;
    background-color: red;
}

<main>
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
</main>