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

兩個在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() 可以完美實現預期。

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

React為了提高效率，把事件都委托給了document，所以?e.stopPropagation() 并非是不能阻止冒泡，而是等他阻止冒泡的時侯，事件已經傳遞給document了，沒東西可阻止了?？梢酝ㄟ^在document.body上綁定 alert（3），直觀的了解這一點，3 是優先于 1 彈出的。

e.stopPropagation()不行，瀏覽器支持一個好東西，e.stopImmediatePropagation() 他不光阻止冒泡，還能阻止在當前事件觸發元素上，觸發其它事件。這樣即使你都綁定到document上也阻止不了我了吧。

這樣做還不行，React對原生事件封裝，提供了很多好東西，但也省略了某些特性。e.stopImmediatePropagation() 就是被省略的部分，然而，他給了開口：e.nativeEvent?，從原生的事件對象里找到stopImmediatePropagation()，完活。

測試代碼如下：

class Test extends React.Component{componentDidMount(){document.οnclick=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") );

?

感謝且不僅限于：

轉載于:https://www.cnblogs.com/libin-1/p/6298326.html

總結

以上是生活随笔為你收集整理的深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。