事件冒泡，addEventListener未取消

Question

正在读取MDN中有关addEventListener的文档。然后，我做了一些实验，最终得到了以下代码：

const inner = document.querySelector('#inner').addEventListener('click',
  () => {
    console.log('inner');
  }, true);


const outer = document.querySelector('#outer').addEventListener('click',
  () => {
    console.log('outer');
  }, true);

<div id="outer">
  <div id="inner">click me</div>
</div>

[我认为通过将addEventListener的第三个元素设置为true，它将停止事件传播，并因此停止内部div的事件冒泡。

• 这怎么不停止冒泡？
• 我如何设法阻止冒泡？

Answer 1

您应该使用stopPropagation停止事件冒泡。

根据已定义的标准，应禁止使用它，因为它可能导致漏洞。

const inner = document.querySelector('#inner').addEventListener('click',
  (e) => {
    e.stopPropagation();
    console.log('inner');
  });


const outer = document.querySelector('#outer').addEventListener('click',
  () => {
    console.log('outer');
  });

<div id="outer">
  <div id="inner">click me</div>
</div>