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

標籤：xtend   alt   click   不能   return   tac   span   需求   組件   

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

兩個在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"));

 

感謝且不僅限於：

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