前言
在学习react阻止事件冒泡，需要先了解 合成事件 和 原生事件
合成事件：在jsx中直接绑定的事件，就是合成事件；
原生事件： 通过js原生代码绑定的事件，就是原生事件；
react事件：react有自己的一套事件处理机制，它将所有事件都绑定在document上，然后再用dispatchEvent来分发，这时候分发的就是合成事件
实际是document上绑定了两个事件：
// react 合成事件, dispatchEvent里面执行回调函数
document.addEventListener('click'， dispatchEvent); // 浏览器原生
document.addEventListener('click', () => {
alert('document click');
})
举栗子（什么是合成事件和原生事件的例子）：
import * as React from 'react'
export default class IndicatorItem extends React.Component {
componentDidMount () {
// 这就是原生事件
document.addEventListener('click', this.click)
}
click = (e) => {
console.log('原生click', e)
if (e.target.className !== 'indicator_item' && e.target.parentElement.className !== 'indicator_item') {
// debugger
clearIndicatorDetail()
}
e.stopPropagation()
}
handleClick=(id, status, e) => {
console.log('合成事件')
// 阻止事件冒泡，（阻止这个合成事件，往document上冒泡，因此不会触发click方法）
e.nativeEvent.stopImmediatePropagation()
// 阻止合成事件间的冒泡，不会往最外层的div的test方法冒了，如果不加这句代码，就会冒泡至外层div，执行test方法。
e.stopPropagation()
}
test = ()=> {
// 这个没有加阻止冒泡，因此，这个可以往document上冒
console.log('合成 out')
}
render () {return (
<div onClick={this.test}>
{
indicators.map((item, index) => {
return (
<div className='indicator_item' key={`item${index}`} onClick={(e) => this.handleClick(item.id, item.status, e)}>
{ item.status === 1 ? null : (<Tooltip title={iconWordMap[item.status]} style={{ marginLeft: '-20px' }}>
<Icon name={iconMap[item.status]} style={{ marginRight: 8, color: item.status === 0 ? '#FFD738' : '#82868C' }} />
</Tooltip>) }
<span className='indicator_item_nickname'>{item.nickname}</span>
</div>
)
})
}
</div>
)
}
}
正文：
阻止事件冒泡分三种：
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,()=>{});
参考文章：https://zhuanlan.zhihu.com/p/26742034 和 https://segmentfault.com/a/1190000013343819