深刻React事件系統(React點擊空白部分隱藏彈出層；React阻止事件冒泡失效)

來源：https://www.cnblogs.com/lihuanqing/p/6295685.html

只關注括號內問題的同窗，可直接跳轉到藍字部分。（標題起的有點大，其實只討論一個問題）

兩個在React組件上綁定的事件，產生衝突後，使用e.stopPropagation()，阻止冒泡，便可防止事件衝突，毫無問題。

今天是踩了個React事件的坑，需求能夠簡化爲：點擊框體之外的部分則隱藏框體。最直接的想法，document上綁定個事件，設置控制顯示隱藏的state爲false，在框體上綁定個事件，阻止冒泡。這樣點擊框體內部就不會觸發document上的事件。

等寫完了，發現一個問題，沒法阻止冒泡，一搜索，好傢伙，好多人問e.stopPropagation()爲何沒法阻止事件冒泡，可是鮮有靠譜的回答。我第一個想法是原生事件和React事件產生衝突。明顯綁定原生事件是不符合React精神的，但我決定在探索真理的路上走下去了。

爲了直觀的調試，把需求轉化爲，點擊框體內 alert（1）點擊框體外 alert（2）。

在document上綁定 alert（2），框體上（框體爲React組件，下同）綁定 alert（1），不作特殊處理，點擊框體內，根據事件冒泡，先彈 1 再彈 2 。這一點符合預期。此時e.stopPropagation()沒法阻止冒泡。

通過 Stack Overflow 解惑 e.nativeEvent.stopImmediatePropagation() 能夠完美實現預期。

下面進入探索環節，經查閱資料，得出如下結論：

1. React爲了提升效率，把事件都委託給了document，因此 e.stopPropagation() 並不是是不能阻止冒泡，而是等他阻止冒泡的時侯，事件已經傳遞給document了，沒東西可阻止了。能夠經過在document.body上綁定 alert（3），直觀的瞭解這一點，3 是優先於 1 彈出的。
2. e.stopPropagation()不行，瀏覽器支持一個好東西，e.stopImmediatePropagation() 他不光阻止冒泡，還能阻止在當前事件觸發元素上，觸發其它事件。這樣即便你都綁定到document上也阻止不了我了吧。
3. 這樣作還不行，React對原生事件封裝，提供了不少好東西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他給了開口：e.nativeEvent ，從原生的事件對象裏找到stopImmediatePropagation()，完活。

測試代碼以下：

class Test extends React.Component{
    componentDidMount(){
        document.onclick=this.two;
    }
    one(e){
        e.nativeEvent.stopImmediatePropagation();
        alert(1)
    }
    two(){
        alert(2)
    }
    render(){
        return(<div style={{height:150,width:150,backgroundColor:"#000"}} onClick={this.one}/>)
    }
}

ReactDOM.render(
    <Test/>,
    document.getElementById("test")
);

 

感謝且不只限於：

http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events

http://wiki.jikexueyuan.com/project/react/event-system.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation