react 阻止事件冒泡

前言

在学习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]} -20px' }}>
                    <Icon name={iconMap[item.status]} #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