事件冒泡，addEventListener 未取消答案

【问题标题】：Event bubbling, addEventListener not cancelled事件冒泡，addEventListener 未取消
【发布时间】：2018-08-25 09:35:39
【问题描述】：

正在阅读 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 的事件冒泡。

这怎么不能阻止冒泡？
如何阻止冒泡？

【问题讨论】：

要停止冒泡问题，您可以使用 event.preventDefault() 或 event.stopPropagation()
Unable to understand useCapture parameter in addEventListener的可能重复

标签： javascript html event-handling dom-events event-bubbling

【解决方案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>

【讨论】：