stopPropagation()与stopImmediatePropagation()的区别

小贤的前端

已于 2023-01-03 10:21:48 修改

阅读量1.5k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-04-06 10:52:17 首次发布

本文链接：https://blog.csdn.net/wen110898/article/details/123983105

版权

本文探讨了JavaScript中stopPropagation()和stopImmediatePropagation()的区别。stopPropagation()阻止事件冒泡，而stopImmediatePropagation()不仅阻止冒泡，还阻止同一元素上同事件类型的其他监听器调用。通过示例演示了两者的效果，并提到了在React中使用合成事件时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信很多小伙伴都知道如何阻止“事件冒泡”，使用event.stopPropagation()或者使用event.stopImmediatePropagation()又或者两者一起使用，但是你知道他们之间的区别吗？

首先我们先看看MDN官网对两者的定义浅浅了解一下:

stopPropagation

Event 接口的 stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见 preventDefault() 方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其它事件处理器，如果要阻止这些处理器的运行，请参见 stopImmediatePropagation() 方法。

stopImmediatePropagation

Event 接口的 stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。
如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

综上所述，我们可以简单的概括为：stopPropagation是用于阻止事件冒泡，而stopImmediatePropagation是用于阻止事件冒泡并且阻止该元素上同事件（