关于前端:你所不知道的stopPropagation

大家都说stopPropagation能阻止事件冒泡，没错。
但有个点你可能不晓得，他还能阻止事件捕捉传递。

如果你还不理解DOM事件流，能够看我这篇文章[DOM事件流]
(https://www.jianshu.com/p/236…)

举个🌰

<div id="root">
  <button id="btn">点我</button>
</div>
<script>
  var root = document.getElementById("root");
  var btn = document.getElementById("btn");
  root.addEventListener("click", function (e) {
    e.stopPropagation()
    console.log("root-捕捉")
  }, true);
  root.addEventListener("click", function (e) {
    console.log("root-冒泡")
  });
  btn.addEventListener("click", function (e) {
    console.log("btn-捕捉")
  }, true);
  btn.addEventListener("click", function (e) {
    console.log("btn-冒泡")
  });
</script>

点击按钮，只会打印出root-捕捉

笔记

如果在捕捉阶段，调用了stopPropagation，则按事件流的程序，前面的捕捉和冒泡事件都不会执行
同样，只在冒泡阶段调用，只能阻止前面的冒泡事件执行

总结：只有调用了stopPropagation，能阻止捕捉和冒泡