React合成事件(阻止冒泡stopImmediatePropagation)

最新推荐文章于 2025-02-26 15:05:44 发布

LYFlied

最新推荐文章于 2025-02-26 15:05:44 发布

阅读量3.7k

点赞数 5

分类专栏： React 问题&&解决文章标签： react 合成事件事件冒泡事件代理

本文链接：https://blog.csdn.net/qq_39903567/article/details/115346338

版权

本文主要探讨了在React中遇到的阻止事件冒泡问题，详细解析了React的合成事件机制，包括执行顺序、如何阻止冒泡（stopPropagation与stopImmediatePropagation的区别）、this指向问题的解决方法，以及React事件池的变化（React 17已不再使用事件池）。通过实例分析，展示了如何使用e.nativeEvent.stopImmediatePropagation()解决阻止冒泡失效的问题。

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

一、遇到的问题

React 阻止冒泡失效

问题描述

一个div弹框，点击按钮时显示，点击空白处隐藏
在document上绑定隐藏事件
点击显示的按钮需要阻止冒泡
但是我使用e.stopPropagation();失效

分析

React组件类似onClick的事件是合成事件，本质上所有绑定是代理到document上的，所有绑定都会冒泡到document层去执行
A、阻止合成事件间的冒泡，用e.stopPropagation();
B、阻止合成事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();
stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免

componentDidMount() {
    document.body.addEventListener('click',e=>{
    // 通过e.target判断阻止冒泡
                if(e.target&&e.target.matches('a')){
    return;
                }
    console.log('body');
            })
        }
    }

二、React 合成事件

React 组件绑定事件本质上是代理到 document 上。
也就是说，只有当事件流冒泡到 document 上时，才会依次触发 document 上绑定的事件。

SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口
SyntheticEvent 是合并而来。这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。
如果你想异步访问事件属性，

最低0.47元/天解锁文章