stopPropagation与stopImmediatePropagation的区别

最新推荐文章于 2025-03-08 15:29:13 发布

xiao xu

最新推荐文章于 2025-03-08 15:29:13 发布

阅读量1.1w

点赞数 14

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42420703/article/details/104585427

版权

前端专栏收录该内容

44 篇文章

订阅专栏

stopPropagation

event.stopPropagation();阻止事件冒泡。

stopImmediatePropagation

event.stopImmediatePropagation(); 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发。例如：

没有阻止事件冒泡：

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事件，如果只使用stopPropagation是只能阻止事件冒泡至其父节点，而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原生事件混用须知