本文共 2353 字，大约阅读时间需要 7 分钟。

最近在研究react、redux等，网上找了很久都没有完整的答案，如果对你有用就关注一下，以后都会有干货分享的，谢谢。

首先，要知道再react中的合成事件和原生事件之间的区别http://www.jianshu.com/p/e0894bd588f4。
1、合成事件

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

this.handleClick(e)}>更新

这里的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();

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){// 阻止合成事件间的冒泡        e.stopPropagation();this.setState({
   count:++this.state.count});    }testClick(){console.log('test')     }render(){return(
   
    this.testClick()}>
    
{this.state.count}
    this.handleClick(e)}>更新
   
        )    }}var div1 = document.getElementById('content');ReactDOM.render(
   ,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(
   
    
{this.state.count}
    this.handleClick(e)}>更新
   
        )    }componentDidMount() {document.addEventListener('click', () => {console.log('document');        });    }}var div1 = document.getElementById('content');ReactDOM.render(
   ,div1,()=>{});

C、阻止合成事件与除最外层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(
   
    
{this.state.count}
    this.handleClick(e)}>更新
   
        )    }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(
   ,div1,()=>{});

转载地址：http://mwrni.baihongyu.com/