相信很多小伙伴都知道如何阻止“事件冒泡”，使用event.stopPropagation()或者使用event.stopImmediatePropagation()又或者两者一起使用，但是你知道他们之间的区别吗？
首先我们先看看MDN官网对两者的定义浅浅了解一下:
stopPropagation
Event 接口的 stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见 preventDefault() 方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其它事件处理器，如果要阻止这些处理器的运行，请参见 stopImmediatePropagation() 方法。
stopImmediatePropagation
Event 接口的 stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。
综上所述，我们可以简单的概括为：stopPropagation是用于阻止事件冒泡，而stopImmediatePropagation是用于阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发。
具体我们可以用Demo来浅析一下：
首先我们先看看没有阻止事件冒泡的情况下：
import React, { Component } from 'react';
export default class App extends Component {
? componentDidMount() {
? ? let parent = document.getElementById('parent');
? ? let child = document.getElementById('child');
? ? parent.addEventListener('click', this.parentClick);
? ? child.addEventListener('click', this.childClick1);
? ? child.addEventListener('click', this.childClick2);
? }
? childClick1 = (e)=> {
? ? console.log('child1');
? }
? childClick2 = (e)=> {
? ? console.log('child2');
? }
? parentClick = ()=> {
? ? console.log('parent');
? }
? render() {
? ? return (
? ? ? <div id='parent'>
? ? ? ? <button id='child'>click me!</button>
? ? ? </div>
? ? );
? }
}
// 控制台输出为：child1 child2 parent
接着我们使用stopPropagation阻止事件冒泡的去情况下：
import React, { Component } from 'react';
export default class App extends Component {
? componentDidMount() {
? ? let parent = document.getElementById('parent');
? ? let child = document.getElementById('child');
? ? parent.addEventListener('click', this.parentClick);
? ? child.addEventListener('click', this.childClick1);
? ? child.addEventListener('click', this.childClick2);
? }
? childClick1 = (e)=> {
? ? console.log('child1');
? ? e.stopPropagation();
? }
? childClick2 = (e)=> {
? ? console.log('child2');
? }
? parentClick = ()=> {
? ? console.log('parent');
? }
? render() {
? ? return (
? ? ? <div id='parent'>
? ? ? ? <button id='child'>click me!</button>
? ? ? </div>
? ? );
? }
}
// 控制台输出为：child1 child2然后再看看使用stopImmediateStopPropagation阻止事件冒泡的情况：
import React, { Component } from 'react';
export default class App extends Component {
? componentDidMount() {
? ? let parent = document.getElementById('parent');
? ? let child = document.getElementById('child');
? ? parent.addEventListener('click', this.parentClick);
? ? child.addEventListener('click', this.childClick1);
? ? child.addEventListener('click', this.childClick2);
? }
? childClick1 = (e)=> {
? ? console.log('child1');
? ? e.stopImmediatePropagation();
? }
? childClick2 = (e)=> {
? ? console.log('child2');
? }
? parentClick = ()=> {
? ? console.log('parent');
? }
? render() {
? ? return (
? ? ? <div id='parent'>
? ? ? ? <button id='child'>click me!</button>
? ? ? </div>
? ? );
? }
}
// 控制台输出为：child1从上面三种情况，我们可以看到：
在#child节点上绑定了2个click事件
1.如果只使用stopPropagation是只能阻止事件冒泡至其父节点，
2.如果使用stopImmediatePropagation既能阻止事件冒泡至父节点，也能阻止当前节点上其他同类型事件的触发。
值得注意的是，这里我是通过addEventListener绑定事件，而不是通过React的onClick绑定事件。
这是因为直接使用addEventListener绑定的事件是直接绑定在真实DOM节点上的，而React的onClick绑定的事件是合成事件，没有绑定在真实DOM上，而是在document处监听所有支持的事件，当事件冒泡至document时，React将事件内容封装并交由真正的处理函数运行。
React中event事件是syntheticEvent（合成事件），合成事件有对原生stopPropagation进行封装，但没有对stopImmediatePropagation进行封装，在react的事件中没有stopImmediatePropagation函数。但可以通过event.nativeEvent.stopImmediatePropagation进行调用。
更多关于React合成事件的具体细节参考：React合成事件和DOM原生事件混用须知
参照博客
https://blog.csdn.net/weixin_42420703/article/details/104585427