溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關React冒泡和阻止冒泡的使用方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
阻止事件冒泡分三種：
1：阻止合成事件往最外層document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation();
2: 合成事件間的冒泡，使用 e.stopPropagation()；
3：阻止合成事件，往處理document上的其他原生事件冒泡，需要通過e.target來判斷，示例代碼如下。
import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';
class Counter extends Component{
constructor(props){
super(props);
this.state = {
count:0,
}
}
handleClick(e){
this.setState({count:++this.state.count});
}
render(){
return(
<div ref="test">
<p>{this.state.count}</p>
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
)
}
componentDidMount() {
document.body.addEventListener('click',e=>{
// 通過e.target判斷阻止冒泡
if(e.target&&e.target.matches('a')){
return;
}
console.log('body');
})
}
}
var div1 = document.getElementById('content');
ReactDOM.render(<Counter/>,div1,()=>{});需求
最近在寫react的項目，需要手寫一個自定義的菜單，和antd的menu不同，需要點擊一級菜單后彈出類似一個Drawer展示二級和三級菜單，且菜單樣式自定義，都在一個Drawer里展示。
難點
其中難點在于點擊一級菜單時彈出Drawer，點擊除Drawer和一級菜單項之外的dom，Drawer收起。
問題
乍一想就是給document添加一個點擊事件監聽，給Drawer和一級菜單添加阻止冒泡，思路確實如此，后面實現中發現：
react為提高性能，有自己的一套事件處理機制，相當于將事件代理到全局進行處理，也就是說監聽函數并未綁定到Dom上。 因此阻止react的事件冒泡e.stopPropagation()，就不發阻止原生事件的冒泡，表現為點擊Drawer也會收起Drawer；禁用原生事件冒泡e.nativeEvent.stopPropagation()，React的監聽函數就調用不到，表現為點擊Drawer以外dom，Drawer不會收起。這些都不是我們想要的。
解決方案
正確的姿勢應該是判斷event.target對象是否是目標對象或包含目標對象或被包含目標對象，以此來決定是否觸發事件
componentDidMount() {
document.addEventListener('click', this.hideDrawer);
}
componentWillUnmount() {
document.removeEventListener('click', this.hideDrawer);
}
hideDrawer = e => {
const { closeDrawer } = this.props;
// 找到不需要關閉的dom 一級菜單
const tabContent = document.querySelectorAll('.ant-menu-submenu-vertical');
// 找到不需要關閉的dom Drawer
const drawerContent = document.querySelector('#menuDrawer');
// 判斷當前點擊的dom對象有沒有包含在目標dom中
const isHave = Array.from(tabContent).some(item => item.contains(e.target));
// 不包含則關閉Drawer 包含就走其他的業務邏輯了
if (tabContent !== null && !(isHave || drawerContent.contains(e.target))) {
closeDrawer();
}
};感謝各位的閱讀！關于React冒泡和阻止冒泡的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
