【React】782- React 中阻止事件冒泡的問(wèn)題

來(lái)源 |?https://www.cnblogs.com/Wayou/p/react_event_issue.html

在正式開(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 MEbutton><script>  document.addEventListener("click", function(event) {    console.log("document clicked");  });
  function btnClickHandler(event) {    console.log("btn clicked");  }script>

輸出:

btn clickeddocument clicked

阻止事件的冒泡

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

<button onclick="btnClickHandler(event)">CLICK MEbutton><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ù)雜邏輯。

document.addEventListener("click", () => {  // close dialog});
dialogElement.addEventListener("click", event => {event.stopPropagation();});

但如果你嘗試在 react 中實(shí)現(xiàn)上面的邏輯，一開(kāi)始的嘗試會(huì)讓你懷疑人生。

react?下事件執(zhí)行的問(wèn)題

了解 JS 中事件的基礎(chǔ)后，會(huì)覺(jué)得一切都沒(méi)什么復(fù)雜。但在引入 React 后，事情開(kāi)始起變化。將上面阻止冒泡的邏輯在 React 里實(shí)現(xiàn)一下，代碼大概像這樣：

function App() {  useEffect(() => {    document.addEventListener("click", documentClickHandler);    return () => {      document.removeEventListener("click", documentClickHandler);    };  }, []);
function documentClickHandler() {console.log("document clicked");}
function btnClickHandler(event) {event.stopPropagation();console.log("btn clicked");}
return <button onClick={btnClickHandler}>CLICK MEbutton>;}

輸出:

btn clickeddocument?clicked

document 上的事件處理器正常執(zhí)行了，并沒(méi)有因?yàn)槲覀冊(cè)诎粹o里面調(diào)用 event.stopPropagation()?而阻止。

那么問(wèn)題出在哪？

React 中事件處理的原理

考慮下面的示例代碼并思考點(diǎn)擊按鈕后的輸出。

import React, { useEffect } from "react";import ReactDOM from "react-dom";
window.addEventListener("click", event => {console.log("window");});
document.addEventListener("click", event => {console.log("document:bedore react mount");});
document.body.addEventListener("click", event => {console.log("body");});
function App() {function documentHandler() {console.log("document within react");}
useEffect(() => {document.addEventListener("click", documentHandler);return () => {document.removeEventListener("click", documentHandler);};}, []);
return (<divonClick={() => {console.log("raect:container");}}><buttononClick={event => {console.log("react:button");}}>CLICK MEbutton>div>);}
ReactDOM.render(<App />, document.getElementById("root"));document.addEventListener("click", event => {console.log("document:after react mount");});

現(xiàn)在對(duì)代碼做一些變動(dòng)，在 body 的事件處理器中把冒泡阻止，再思考其輸出。

document.body.addEventListener("click", event => {+  event.stopPropagation();  console.log("body");});

下面是劇透環(huán)節(jié)，如果你懶得自己實(shí)驗(yàn)的話。

點(diǎn)擊按鈕后的輸出：

bodydocument:bedore react mountreact:buttonraect:containerdocument:after react mountdocument within reactwindow

bdoy 上阻止冒泡后，你可能會(huì)覺(jué)得，既然 body 是按鈕及按鈕容器的父級(jí)，那么按鈕及容器的事件會(huì)正常執(zhí)行，事件到達(dá) body 后， body 的事件處理器執(zhí)行，然后就結(jié)束了。document 上的事件處理器一個(gè)也不執(zhí)行。

事實(shí)上，按鈕及按鈕容器上的事件處理器也沒(méi)執(zhí)行，只有 body 執(zhí)行了。

輸出：

body

通過(guò)下面的分析，你能夠完全理解上面的結(jié)果。

SyntheticEvent

React 有自身的一套事件系統(tǒng)，叫作 SyntheticEvent。叫什么不重要，實(shí)現(xiàn)上，其實(shí)就是通過(guò)在 document 上注冊(cè)事件代理了組件樹(shù)中所有的事件（facebook/react#4335），并且它監(jiān)聽(tīng)的是 document 冒泡階段。你完全可以忽略掉 SyntheticEvent 這個(gè)名詞，如果覺(jué)得它有點(diǎn)讓事情變得高大上或者增加了一些神秘的話。

除了事件系統(tǒng)，它有自身的一套，另外還需要理解的是，界面上展示的 DOM 與我們代碼中的 DOM 組件，也是兩樣?xùn)|西，需要在概念上區(qū)分開(kāi)來(lái)。

所以，當(dāng)你在頁(yè)面上點(diǎn)擊按鈕，事件開(kāi)始在原生 DOM 上走捕獲冒泡流程。React 監(jiān)聽(tīng)的是 document 上的冒泡階段。事件冒泡到 document 后，React 將事件再派發(fā)到組件樹(shù)中，然后事件開(kāi)始在組件樹(shù) DOM 中走捕獲冒泡流程。

現(xiàn)在來(lái)嘗試?yán)斫庖幌螺敵鼋Y(jié)果：

• 事件最開(kāi)始從原生 DOM 按鈕一路冒泡到 body，body 的事件處理器執(zhí)行，輸出 body。注意此時(shí)流程還沒(méi)進(jìn)入 React。為什么？因?yàn)?React 監(jiān)聽(tīng)的是 document 上的事件。

• 繼續(xù)往上事件冒泡到 document。

• 事件到達(dá) document 之后，發(fā)現(xiàn) document 上面一共綁定了三個(gè)事件處理器，分別是代碼中通過(guò) document.addEventListener 在 ReactDOM.render 前后調(diào)用的，以及一個(gè)隱藏的事件處理器，是 ReactDOM 綁定的，也就是前面提到的 React 用來(lái)代理事件的那個(gè)處理器。

• 同一元素上如果對(duì)同一類(lèi)型的事件綁定了多個(gè)處理器，會(huì)按照綁定的順序來(lái)執(zhí)行。

• 所以 ReactDOM.render 之前的那個(gè)處理器先執(zhí)行，輸出 document:before react mount。

• 然后是 React 的事件處理器。此時(shí)，流程才真正進(jìn)入 React，走進(jìn)我們的組件。組件里面就好理解了，從 button 冒泡到 container，依次輸出。

• 最后 ReactDOM.render 之后的那個(gè)處理器先執(zhí)行，輸出 document:after react mount。

• 事件完成了在 document 上的冒泡，往上到了 window，執(zhí)行相應(yīng)的處理器并輸出 window。

理解 React 是通過(guò)監(jiān)聽(tīng) document 冒泡階段來(lái)代理組件中的事件，這點(diǎn)很重要。同時(shí)，區(qū)分原生 DOM 與 React 組件，也很重要。并且，React 組件上的事件處理器接收到的 event 對(duì)象也有別于原生的事件對(duì)象，不是同一個(gè)東西。但這個(gè)對(duì)象上有個(gè) nativeEvent 屬性，可獲取到原生的事件對(duì)象，后面會(huì)用到和討論它。

緊接著的代碼的改動(dòng)中，我們?cè)?body 上阻止了事件冒泡，這樣事件在 body 就結(jié)束了，沒(méi)有到達(dá) document，那么 React 的事件就不會(huì)被觸發(fā)，所以 React 組件樹(shù)中，按鈕及容器就沒(méi)什么反應(yīng)。如果沒(méi)理解到這點(diǎn)，光看表象還以為是 bug。

進(jìn)而可以理解，如果在 ReactDOM.render()?之前的的 document 事件處理器上將冒泡結(jié)束掉，同樣會(huì)影響 React 的執(zhí)行。只不過(guò)這里需要調(diào)用的不是 event.stopPropagation()，而是 event.stopImmediatePropagation()。

document.addEventListener("click", event => {+  event.stopImmediatePropagation();  console.log("document:bedore react mount");});

輸出：

bodydocument:bedore react mount

stopImmediatePropagation 會(huì)產(chǎn)生這樣的效果，即，如果同一元素上同一類(lèi)型的事件（這里是 click）綁定了多個(gè)事件處理器，本來(lái)這些處理器會(huì)按綁定的先后來(lái)執(zhí)行，但如果其中一個(gè)調(diào)用了 stopImmediatePropagation，不但會(huì)阻止事件冒泡，還會(huì)阻止這個(gè)元素后續(xù)其他事件處理器的執(zhí)行。

所以，雖然都是監(jiān)聽(tīng) document 上的點(diǎn)擊事件，但 ReactDOM.render()?之前的這個(gè)處理器要先于 React，所以 React 對(duì) document 的監(jiān)聽(tīng)不會(huì)觸發(fā)。

解答前面按鈕未能阻止冒泡的問(wèn)題

如果你已經(jīng)忘了，這是相應(yīng)的代碼及輸出。

到這里，已經(jīng)可以解答為什么 React 組件中 button 的事件處理器中調(diào)用 event.stopPropagation()?沒(méi)有阻止 document 的點(diǎn)擊事件執(zhí)行的問(wèn)題了。因?yàn)?button 事件處理器的執(zhí)行前提是事件達(dá)到 document 被 React 接收到，然后 React 將事件派發(fā)到 button 組件。既然在按鈕的事件處理器執(zhí)行之前，事件已經(jīng)達(dá)到 document 了，那當(dāng)然就無(wú)法在按鈕的事件處理器進(jìn)行阻止了。

問(wèn)題的解決

要解決這個(gè)問(wèn)題，這里有不止一種方法。

用?window?替換?document

來(lái)自?React issue 回答中提供的這個(gè)方法是最快速有效的。使用 window 替換掉 document 后，前面的代碼可按期望的方式執(zhí)行。

function App() {  useEffect(() => {+    window.addEventListener("click", documentClickHandler);    return () => {+      window.removeEventListener("click", documentClickHandler);    };  }, []);
function documentClickHandler() {console.log("document clicked");}
function btnClickHandler(event) {event.stopPropagation();console.log("btn clicked");}
return <button onClick={btnClickHandler}>CLICK MEbutton>;}

這里 button 事件處理器上接到到的 event 來(lái)自 React 系統(tǒng)，也就是 document 上代理過(guò)來(lái)的，所以通過(guò)它阻止冒泡后，事件到 document 就結(jié)束了，而不會(huì)往上到 window。

Event.stopImmediatePropagation()

組件中事件處理器接收到的 event 事件對(duì)象是 React 包裝后的 SyntheticEvent 事件對(duì)象。但可通過(guò)它的 nativeEvent 屬性獲取到原生的 DOM 事件對(duì)象。通過(guò)調(diào)用這個(gè)原生的事件對(duì)象上的 stopImmediatePropagation()?方法可達(dá)到阻止冒泡的目的。

function btnClickHandler(event) {+  event.nativeEvent.stopImmediatePropagation();  console.log("btn clicked");}

至于原理，其實(shí)前面已經(jīng)有展示過(guò)。React 在 render 時(shí)監(jiān)聽(tīng)了 document 冒泡階段的事件，當(dāng)我們的 App 組件執(zhí)行時(shí)，準(zhǔn)確地說(shuō)是渲染完成后（useEffect 渲染完成后執(zhí)行），又在 document 上注冊(cè)了 click 的監(jiān)聽(tīng)。此時(shí) document 上有兩個(gè)事件處理器了，并且組件中的這個(gè)順序在 React 后面。

當(dāng)調(diào)用 event.nativeEvent.stopImmediatePropagation()?后，阻止了 document 上同類(lèi)型后續(xù)事件處理器的執(zhí)行，達(dá)到了想要的效果。

但這種方式有個(gè)缺點(diǎn)很明顯，那就是要求需要被阻止的事件是在 React render 之后綁定，如果在之前綁定，是達(dá)不到效果的。

通過(guò)元素自身來(lái)綁定事件處理器

當(dāng)繞開(kāi) React 直接通過(guò)調(diào)用元素自己身上的方法來(lái)綁定事件時(shí)，此時(shí)走的是原生 DOM 的流程，都沒(méi)在 React 的流程里面。

function App() {  const btnElement = useRef(null);  useEffect(() => {    document.addEventListener("click", documentClickHandler);    if (btnElement.current) {      btnElement.current.addEventListener("click", btnClickHandler);    }return () => {  document.removeEventListener("click", documentClickHandler);  if (btnElement.current) {    btnElement.current.removeEventListener("click", btnClickHandler);  }};

}, []);
function documentClickHandler() {console.log("document clicked");}
function btnClickHandler(event) {event.stopPropagation();console.log("btn clicked");}
return CLICK ME;}

很明顯這樣是能解決問(wèn)題，但你根本不會(huì)想要這樣做。代碼丑陋，不直觀也不易理解。

結(jié)論

注意區(qū)分 React 組件的事件及原生 DOM 事件，一般情況下，盡量使用 React 的事件而不要混用。如果必需要混用比如監(jiān)聽(tīng) document，window 上的事件，處理 mousemove，resize 等這些場(chǎng)景，那么就需要注意本文提到的順序問(wèn)題，不然容易出 bug。

相關(guān)資源

• e.stopPropagation() seems to not be working as expect. #4335

• ReactJS SyntheticEvent stopPropagation() only works with React events?

• Event.stopImmediatePropagation()

• SyntheticEvent