react阻止冒泡事件，絕對乾貨

最近在研究react、redux等，網上找了很久都沒有完整的答案，如果對你有用就關注一下，以後都會有乾貨分享的，謝謝。

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();

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(<div ref="test" onClick={()=>this.testClick()}><p>{this.state.count}</p><a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a></div> ) }}var div1 = 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); }); }}var div1 = document.getElementById(content);ReactDOM.render(<Counter/>,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(<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,()=>{});

推薦閱讀：