你所不知道的stopPropagation

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

如果你还不了解DOM事件流，可以看我这篇文章[DOM事件流] (www.jianshu.com/p/236f4e0be…)

举个🌰

<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，能阻止捕获和冒泡