深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只關注括號內問題的同學,可直接跳轉到藍字部分。(標題起的有點大,其實只討論一個問題)
兩個在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() 可以完美實現預期。
下面進入探索環節,經查閱資料,得出以下結論:
測試代碼如下:
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阻止事件冒泡失效)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 错误提示:'……' is not ass
- 下一篇: 网站管理系统