React中阻止事件冒泡的问题详析

前言

最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧

在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。

JS 中事件的监听与处理

事件捕获与冒泡

DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。

IE9 及之前的版本只支持冒泡

                  |  A
 -----------------|--|-----------------
 | Parent         |  |                |
 |   -------------|--|-----------     |
 |   |Children    V  |          |     |
 |   ----------------------------     |
 |                                    |
 --------------------------------------

事件处理器

默认情况下，事件处理器是在事件的冒泡阶段执行，无论是直接设置元素的 onclick 属性还是通过 EventTarget.addEventListener() 来绑定，后者在没有设置 useCapture 参数为 true 的情况下。

考察下面的示例：

<button onclick="btnClickHandler(event)">CLICK ME</button><script> document.addEventListener("click", function(event) { console.log("document clicked"); }); function btnClickHandler(event) { console.log("btn clicked"); }</script>

输出:

btn clicked
document clicked

阻止事件的冒泡

通过调用事件身上的 stopPropagation() 可阻止事件冒泡，这样可实现只我们想要的元素处理该事件，而其他元素接收不到。

<button onclick="btnClickHandler(event)">CLICK ME</button><script> document.addEventListener( "click", function(event) { console.log("document clicked"); }, false ); function btnClickHandler(event) { event.stopPropagation(); console.log("btn clicked"); }</script>

输出：

btn clicked

一个阻止冒泡的应用场景

常见的弹窗组件中，点击弹窗区域之外关闭弹窗的功能，可通过阻止事件冒泡来方便地实现，而不用这种方式的话，会引入复杂的判断当前点击坐标是否在弹窗之外的复杂逻辑。