react取消捕获_React中阻止事件冒泡的问题详析

前言

最近在研究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 后，，事情开始起变化。将上面阻止冒