Question

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

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>

事件冒泡，addEventListener未取消

1 个答案: