react阻止冒泡事件,绝对干货

转载 (原文地址) 还好 随笔 react 243阅读 2017-06-16 14:21:35 举报

首先,要知道再react中的合成事件和原生事件之间的区别。
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,()=>{});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复