前言
最近在研究react、redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。
JS 中事件的监听与处理
事件捕获与冒泡
DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。
IE9 及之前的版本只支持冒泡| A
-----------------|--|-----------------
| Parent | | |
| -------------|--|----------- |
| |Children V | | |
| ---------------------------- |
| |
--------------------------------------
事件处理器
默认情况下,事件处理器是在事件的冒泡阶段执行,无论是直接设置元素的 onclick 属性还是通过 EventTarget.addEventListener() 来绑定,后者在没有设置 useCapture 参数为 true 的情况下。
考察下面的示例:
CLICK ME
document.addEventListener("click", function(event) {
console.log("document clicked");
});
function btnClickHandler(event) {
console.log("btn clicked");
}
输出:
btn clicked
document clicked
阻止事件的冒泡
通过调用事件身上的 stopPropagation()可阻止事件冒泡,这样可实现只我们想要的元素处理该事件,而其他元素接收不到。
CLICK ME
document.addEventListener(
"click",
function(event) {
console.log("document clicked");
},
false
);
function btnClickHandler(event) {
event.stopPropagation();
console.log("btn clicked");
}
输出:
btn clicked
一个阻止冒泡的应用场景
常见的弹窗组件中,点击弹窗区域之外关闭弹窗的功能,可通过阻止事件冒泡来方便地实现,而不用这种方式的话,会引入复杂的判断当前点击坐标是否在弹窗之外的复杂逻辑。
document.addEventListener("click", () => {
// close dialog
});
dialogElement.addEventListener("click", event => {
event.stopPropagation();
});
但如果你尝试在 React 中实现上面的逻辑,一开始的尝试会让你怀疑人生。
React 下事件执行的问题
了解了 JS 中事件的基础,一切都没什么难的。在引入 React 后,,事情开始起变化。将上面阻止冒