文章引用來自： http://www.reibang.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');