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

Question

我的'capture'选项似乎在addEventListener中不起作用（即，无论我将其设置为true还是false，都给我相同的控制台结果）。我检查了以下内容：（1）在选项对象中添加“ once：true”-可以，但是捕获不会（2）将'capture'替换为'useCapture'-这似乎也不起作用，在两种情况下都没有错误/警告消息（3）我在网上阅读到某些浏览器（例如chrome版本低于55）不支持较新的选项，例如“ once”（一次）-我正在使用chrome v88，并尝试通过Safari打开文件，以防万一它是浏览器相关问题

你知道我在做什么错吗？

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

<script>

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

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

为我工作，请尝试在div上设置高度和颜色，以便查看。

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>

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

一个

两个

三

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

三

两个

一个