首页 >> 知识 >> React阻止事件冒泡

React阻止事件冒泡

起因:

要用fullcalendar加个详情,点击弹出Modal,但是在点击详情Modal内的按钮时被fullcalendar监听到了就关闭了moreModal,然后跟着Modal所在的上下文也跟着被摧毁了,从用户视角来看就是点一下,框没了。

尝试解决:

我第一反应是用event.stopPropagation阻止冒泡,但是结果失败了,又想是不是因为react事件系统跟原生不一样,看了一篇文档,知道了react用的是合成事件系统(这就是为什么F12看见的是SyntheticEvent),然后我就直接用js添加事件,最后发现冒泡被拦截了,但是详情里的按钮也点不了了!

经过排查,确定是因为react的合成事件最终全部是冒泡到根节点统一处理的,如果使用js拦截冒泡的话,被拦截的dom下面的组件就不会触发事件。

再看了看文档,发现event有个nativeEvent属性,可以访问到原生的dom事件对象,然后使用event.nativeEvent.stopPropagation()就可以阻止原生事件的冒泡传播。

问题在于,我是用ant的Modal组件啊!Modal组件并没有提供react事件api的api!

那咋办?直接在Modal外面罩上一层div?问题是Modal组件是在body标签下面生成原生dom的啊?这也罩不住啊?

但是我转念一想,这是从原生的角度去看结构,如果从React组件上下文的角度去看,那就是在div下的,然后我就在Modal外罩了一层div,给div上了一个onMouseDown监听,最后发现成了!我真牛逼!

代码:

{ event.nativeEvent.stopPropagation(); }>

网站地图