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');})}}
本文来自网友贝贝
