react阻止事件冒泡
// 这里的handleClick事件就合成事件
<a ref="aaa" onClick={(e)=>this.handleClick(e)}>更新</a>
// 原生事件
document.addEventListener('click',e=>{ do something })
阻止合成事件间的冒泡,用e.stopPropagation();
<div ref="test" onClick={()=>this.handleClick()}>
<a ref="update" onClick={(e)=>this.handleClick2(e)}>handleClick</a>
</div>
阻止合成事件与最外层document上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation();
document.addEventListener('click', () => {})
<div ref="test">
<a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
</div>
阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
<div ref="test">
<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');
})
}
}
本文来自网友贝贝