javascript - 为什么捕获选项在 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>