最近在研究react、redux等郊丛，網(wǎng)上找了很久都沒有完整的答案李请，如果對你有用就關(guān)注一下，以后都會有干貨分享的厉熟，謝謝导盅。
首先，要知道再react中的合成事件和原生事件之間的區(qū)別揍瑟。
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,()=>{});
