直接看栗子:
页面上3个div,如图所示
1、在没有涉及到原生事件注册只有react事件时,用e.stopPropagation()阻止冒泡,代码如下:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
handleClickTestBox = (e) => {
console.warn('handleClickTestBox: ', e);
}
handleClickTestBox2 = (e) => {
console.warn('handleClickTestBox2: ', e);
}
handleClickTestBox3 = (e) => {
e.stopPropagation();
console.warn('handleClickTestBox3: ', e);
}
render() {
return (
<div
className="test-box"
onClick={this.handleClickTestBox}
>
<div
onClick={this.handleClickTestBox2}
>
<div
onClick={this.handleClickTestBox3}
>
</div>
</div>
</div>
);
}
}
export default App;
控制台打印:
成功阻止事件的冒泡
2、当用document.addEventListener注册了原生的事件后,用e.stopPropagation()是不能阻止与document之间的冒泡,这时候需要用到e.nativeEvent.stopImmediatePropagation()方法,代码如下:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
document.addEventListener('click', this.handleDocumentClick, false);
}
handleDocumentClick = (e) => {
console.log('handleDocumentClick: ', e);
}
handleClickTestBox = (e) => {
console.warn('handleClickTestBox: ', e);
}
handleClickTestBox2 = (e) => {
console.warn('handleClickTestBox2: ', e);
}
handleClickTestBox3 = (e) => {
// 阻止合成事件的冒泡
e.stopPropagation();
// 阻止与原生事件的冒泡
e.nativeEvent.stopImmediatePropagation();
console.warn('handleClickTestBox3: ', e);
}
render() {
return (
<div
className="test-box"
onClick={this.handleClickTestBox}
>
<div
onClick={this.handleClickTestBox2}
>
<div
onClick={this.handleClickTestBox3}
>
</div>
</div>
</div>
);
}
}
export default App;
3、阻止合成事件与非合成事件(除了document)之间的冒泡,以上两种方式都不适用,需要用到e.target 判断, 代码如下:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
document.addEventListener('click', this.handleDocumentClick, false);
document.body.addEventListener('click', this.handleBodyClick, false);
}
handleDocumentClick = (e) => {
console.log('handleDocumentClick: ', e);
}
handleBodyClick = (e) => {
if (e.target && e.target === document.querySelector('#inner')) {
return;
}
console.log('handleBodyClick: ', e);
}
handleClickTestBox = (e) => {
console.warn('handleClickTestBox: ', e);
}
handleClickTestBox2 = (e) => {
console.warn('handleClickTestBox2: ', e);
}
handleClickTestBox3 = (e) => {
// 阻止合成事件的冒泡
e.stopPropagation();
// 阻止与原生事件的冒泡
e.nativeEvent.stopImmediatePropagation();
console.warn('handleClickTestBox3: ', e);
}
render() {
return (
<div
className="test-box"
onClick={this.handleClickTestBox}
>
<div
onClick={this.handleClickTestBox2}
>
<div
id="inner"
onClick={this.handleClickTestBox3}
>
</div>
</div>
</div>
);
}
}
export default App;
控制台打印: