前言

最近在研究react、redux等，網(wǎng)上找了很久都沒(méi)有完整的答案，索性自己整理下，這篇文章就來(lái)給大家介紹了關(guān)于React阻止事件冒泡的相關(guān)內(nèi)容，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

在正式開(kāi)始前，先來(lái)看看 JS 中事件的觸發(fā)與事件處理器的執(zhí)行。

JS 中事件的監(jiān)聽(tīng)與處理

事件捕獲與冒泡

DOM 事件會(huì)先后經(jīng)歷 捕獲 與 冒泡 兩個(gè)階段。捕獲即事件沿著 DOM 樹(shù)由上往下傳遞，到達(dá)觸發(fā)事件的元素后，開(kāi)始由下往上冒泡。

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

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

事件處理器

默認(rèn)情況下，事件處理器是在事件的冒泡階段執(zhí)行，無(wú)論是直接設(shè)置元素的 onclick 屬性還是通過(guò) EventTarget.addEventListener() 來(lái)綁定，后者在沒(méi)有設(shè)置 useCapture 參數(shù)為 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

阻止事件的冒泡

通過(guò)調(diào)用事件身上的 stopPropagation() 可阻止事件冒泡，這樣可實(shí)現(xiàn)只我們想要的元素處理該事件，而其他元素接收不到。

<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

一個(gè)阻止冒泡的應(yīng)用場(chǎng)景

常見(jiàn)的彈窗組件中，點(diǎn)擊彈窗區(qū)域之外關(guān)閉彈窗的功能，可通過(guò)阻止事件冒泡來(lái)方便地實(shí)現(xiàn)，而不用這種方式的話，會(huì)引入復(fù)雜的判斷當(dāng)前點(diǎn)擊坐標(biāo)是否在彈窗之外的復(fù)雜邏輯。