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

Question

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

我检查了以下内容：

1. 将once: true添加到选项对象-这很有效，但捕获不起作用
2. 用useCapture替换capture-这似乎也不起作用，而且在这两种情况下都没有错误/警告消息
3. 我在网上读到一些(较旧的，例如chrome版本低于55(浏览器不支持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，输出为：

onetwothree

如果是capture: false，则输出为：

threetwoone

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>