React 事件冒泡

vpants 發(fā)布于2019-08-26 13:41 / 931人閱讀

摘要：有些情況下，就需要通過阻止事件冒泡來實(shí)現(xiàn)預(yù)期的交互效果。下面是幾個(gè)簡單的比如有如下的代碼當(dāng)我們點(diǎn)擊時(shí)，控制臺(tái)輸出結(jié)果這兩個(gè)事件都是合成事件，在點(diǎn)擊時(shí)，兩個(gè)事件會(huì)依次冒泡到由統(tǒng)一的事件監(jiān)聽器處理。這也說明了，合成事件的只能阻止合成事件的冒泡。

在React中，我們可以在創(chuàng)建element的時(shí)候，傳入事件和處理函數(shù)，這些事件會(huì)被做為合成事件來處理，當(dāng)然，有些時(shí)候，我們也需要定義原生事件，比如給document綁定事件。有些情況下，就需要通過阻止事件冒泡來實(shí)現(xiàn)預(yù)期的交互效果。下面是幾個(gè)簡單的demo

Demo

比如有如下的代碼：

import React from "react"
class Demo1 extends React.Component{
    onClickInner(e){
        console.log("inner div")
    }
    onClickOuter(e){
        console.log("outer div")
    }
    render(){
        return 
            inner div
        
    }
}

當(dāng)我們點(diǎn)擊 inner div時(shí)，控制臺(tái)輸出結(jié)果：

inner div
outer div

這兩個(gè)事件都是合成事件，在點(diǎn)擊時(shí)，兩個(gè)事件會(huì)依次冒泡到document,由統(tǒng)一的事件監(jiān)聽器處理。如果希望阻止onClickOuter 觸發(fā)，可以在onClickInner內(nèi)調(diào)用e.stopPropagation()。需要注意的是，這里的e是合成事件實(shí)例，調(diào)用stopPropagation 也只能阻止合成事件的冒泡。

假如我們將onClickOuter 通過原生事件來綁定：

class App extends React.Component {
    onClickInner(e) {
        e.stopPropagation();
        console.log("inner div");
    }
    onClickOuter(e) {
        console.log("outer div");
    }
    componentDidMount() {
        this.outer.onclick = this.onClickOuter;// 通過DOM 0級(jí)綁定
    }
    render() {
        return (
             (this.outer = ref)}>
                123
            
        );
    }
}

雖然在onClickInner內(nèi)調(diào)用了 e.stopPropagation, 但是原生事件還是會(huì)通過冒泡來觸發(fā)，而且會(huì)先于onClickInner，控制臺(tái)輸出：

outer div
inner div

這是因?yàn)?b>onClickInner合成事件被觸發(fā)的時(shí)候，說明點(diǎn)擊事件已經(jīng)通過冒泡傳遞到了document，在這個(gè)過程中，便會(huì)經(jīng)過外層的div，進(jìn)而觸發(fā)該原生事件。這也說明了，合成事件的stopPropagation只能阻止合成事件的冒泡。即使我們?cè)谶@里通過e.nativeEvent獲取到原生事件并調(diào)用stopPropagation,也無濟(jì)于事，因?yàn)樯厦嬉呀?jīng)說了，在該合成事件被觸發(fā)的時(shí)候，已經(jīng)冒泡到了document.
那么我們?cè)撏ㄟ^什么方式來阻止原生事件onClickOuter被觸發(fā)呢：
既然在onClickInner處理不了，只能在onClickOuter內(nèi)處理了：

onClickOuter(e) {// 這里e是原生事件
   if(e.target && e.target.id === "inner"){
       return ;
   }
   console.log("outer div");
}

如果我們將原生事件綁定在了document上:

class App extends React.Component {
    constructor(props) {
        super(props);
        // this.bindDocument();
    }
    onClickInner(e) {
        console.log("inner div");
    }
    componentDidMount() {
        this.bindDocument();
    }
    bindDocument() {
        document.addEventListener("click", function(e) {
            console.log("document");
        });
    }
    render() {
        return (
            
                123
            
        );
    }
}

上面代碼中，在組件掛載完畢后，再給document綁定click事件，這時(shí)候，React合成事件已經(jīng)注冊(cè)完成，當(dāng)點(diǎn)擊時(shí)，document上的click事件會(huì)依據(jù)綁定順序的先后依次執(zhí)行，所以控制臺(tái)會(huì)輸出：

inner div
document

如果希望阻止后綁定的事件觸發(fā)，可以在onClickInner內(nèi)調(diào)用stopImmediatePropagation：

如果有多個(gè)相同類型事件的事件監(jiān)聽函數(shù)綁定到同一個(gè)元素，當(dāng)該類型的事件觸發(fā)時(shí)，它們會(huì)按照被添加的順序執(zhí)行。如果其中某個(gè)監(jiān)聽函數(shù)執(zhí)行了 event.stopImmediatePropagation() 方法，則當(dāng)前元素剩下的監(jiān)聽函數(shù)將不會(huì)被執(zhí)行。