react阻止事件冒泡

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');
        })
    }
}

本文来自网友贝贝