共计 2028 个字符，预计需要花费 6 分钟才能阅读完成。
在 React 中，我们可以在创建 element 的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给 document 绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的 demo
Demo
比如有如下的代码：
import React from ‘react’
class Demo1 extends React.Component{
onClickInner(e){
console.log(‘inner div’)
}
onClickOuter(e){
console.log(‘outer div’)
}
render(){
return <div onClick={this.onClickOuter}>
<div onClick={this.onClickInner}>inner div</div>
</div>
}
}
当我们点击 inner div 时，控制台输出结果：
inner div
outer div
这两个事件都是合成事件，在点击时，两个事件会依次冒泡到 document, 由统一的事件监听器处理。如果希望阻止 onClickOuter 触发，可以在 onClickInner 内调用 e.stopPropagation()。需要注意的是，这里的 e 是合成事件实例，调用 stopPropagation 也只能阻止合成事件的冒泡。
假如我们将 onClickOuter 通过原生事件来绑定：
class App extends React.Component {
onClickInner(e) {
e.stopPropagation();
console.log(“inner div”);
}
onClickOuter(e) {
console.log(“outer div”);
}
componentDidMount() {
this.outer.onclick = this.onClickOuter;// 通过 DOM 0 级绑定
}
render() {
return (
<div ref={ref => (this.outer = ref)}>
<div id=’inner’ onClick={this.onClickInner}>123</div>
</div>
);
}
}
虽然在 onClickInner 内调用了 e.stopPropagation, 但是原生事件还是会通过冒泡来触发，而且会先于 onClickInner，控制台输出：
outer div
inner div
这是因为 onClickInner 合成事件被触发的时候，说明点击事件已经通过冒泡传递到了 document，在这个过程中，便会经过外层的 div，进而触发该原生事件。这也说明了，合成事件的 stopPropagation 只能阻止合成事件的冒泡。即使我们在这里通过 e.nativeEvent 获取到原生事件并调用 stopPropagation, 也无济于事，因为上面已经说了，在该合成事件被触发的时候，已经冒泡到了 document. 那么我们该通过什么方式来阻止原生事件 onClickOuter 被触发呢：既然在 onClickInner 处理不了，只能在 onClickOuter 内处理了：
onClickOuter(e) {// 这里 e 是原生事件
if(e.target && e.target.id === ‘inner’){
return ;
}
console.log(“outer div”);
}
如果我们将原生事件绑定在了 document 上:
class App extends React.Component {
constructor(props) {
super(props);
// this.bindDocument();
}
onClickInner(e) {
console.log(“inner div”);
}
componentDidMount() {
this.bindDocument();
}
bindDocument() {
document.addEventListener(“click”, function(e) {
console.log(“document”);
});
}
render() {
return (
<div id=”inner” onClick={this.onClickInner}>
123
</div>
);
}
}
上面代码中，在组件挂载完毕后，再给 document 绑定 click 事件，这时候，React 合成事件已经注册完成，当点击时，document 上的 click 事件会依据绑定顺序的先后依次执行，所以控制台会输出：
inner div
document
如果希望阻止后绑定的事件触发，可以在 onClickInner 内调用 stopImmediatePropagation：
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
