关于前端:你所不知道的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，能阻止捕捉和冒泡