react阻止冒泡事件

文章引用来自： http://www.jianshu.com/p/e0894bd588f4。

1、合成事件

在jsx中直接绑定的事件，如

<a ref="aaa" onClick={(e)=>this.handleClick(e)}>更新</a>

这里的handleClick事件就是合成事件

2、原生事件

通过js原生代码绑定的事件，如

document.body.addEventListener('click',e=>{

// 通过e.target判断阻止冒泡

if(e.target&&e.target.matches('a')){
  return;
}
  console.log('body');
})

或

this.refs.update.addEventListener('click',e=>{
  console.log('update');
});

3、阻止冒泡事件分三种情况

A、阻止合成事件间的冒泡，用e.stopPropagation();

importReact,{ Component }from'react';

importReactDOM,{findDOMNode}from'react-dom';

class Counter extends Component{
  constructor(props){
    super(props);
      this.state = {
        count:0,
    }
  }
  handleClick(e){
    // 阻止合成事件间的冒泡
    e.stopPropagation();
    this.setState({count:++this.state.count});
  }
  testClick(){
    console.log('test')
  }
  render(){
    return(
      <div ref="test" onClick={()=>this.testClick()}>
      <p>{this.state.count}</p>
      <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
      </div>
    )
  }
}
vardiv1 =document.getElementById('content');
ReactDOM.render(<Counter/>,div1,()=>{});

B、阻止原生事件与最外层document上的事件间的冒泡，用：e.nativeEvent.stopImmediatePropagation()

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){
    // 阻止原生事件与最外层document上的事件间的冒泡
    e.nativeEvent.stopImmediatePropagation();
    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.addEventListener('click', () => {
      console.log('document');
    });
  }
}
vardiv1 =document.getElementById('content');
ReactDOM.render(<Counter/>,div1,()=>{});

C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免

importReact, { Component } from 'react';
importReactDOM, { 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');
    })
  }
}
vardiv1 =document.getElementById('content');