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

40次阅读

共计 682 个字符，预计需要花费 2 分钟才能阅读完成。

大家都说 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- 捕捉

笔记