0
点赞
收藏
分享

微信扫一扫

React 中 event.stopPropagation 不生效?

新的一周开始了,第一个工作日就来了个棘手的bug。在React项目中使用了event.stopPropagation不生效。造成事件冒泡的父级元素。简直离谱。

React的合成事件

React之所以不像vue一样使用原生事件,不仅因为他是先出现的技术框架这么简单。而是React为了解决不同浏览器下的兼容问题。所以将原生事件封装了一层。而与原生事件之间的区别在于他使用了驼峰命名。例如:onClick监听点击事件,原生就是onclick。不仅如此,它还将React事件处理函数用事件对象形式展现,原生事件则采用了字符串的形式。

合成事件与原生事件区分

从表现形式上,合成事件是JSX中直接绑定的事件。javaScript中出现的则是原生事件。从含义上说,合成事件的stopPropagation是只能阻止合成事件绑定的事件。而原生不在React Event绑定函数队列内,因此,无法阻止冒泡。

合成事件代理

实质上,React的合成事件是通过代理模式,将React Event上的绑定事件代理到document元素上。然后在React v17后则改到了root元素上。但是本质上还是通过代理。因此,合成时间的本质就是用一个react对象去封装原生的事件,然后代理到document或者root元素上。

stopPropagation不生效

所以通过上面种种,我们知道了JSX中的stopPropagation是合成时间的方法。而且只在合成时间的绑定函数队列中。所以它根本就和原生事件离个十万八千里呢。因此,不是stopPropagation不生效。而是,要阻止冒泡的不是合成事件。

解决方案

要想解决stopPropagation问题,就要想方法阻止原生事件。
方案一:直接addEventListener('click', e => e.stopPropagation)。
方案二:阻止document上的原生事件,这里可以使用e.nativeEvent.stopImmediatePropagation();
方案三:e.target.matches

代码梳理

import React, { Component } from 'react';

class Demo extends Component {
    onClick = (e) => {
        e.stopPropagaion();
        e.nativeEvent.stopImmediatePropagation();
    }
    
    render() {
        return <div className='demo-class-name' onClick={(e) => this.onClick()}></div>
    }
}

结束语

本文主要介绍了React中stopPropagation不生效的原因。并通过原理上的分析,让大家知道产生的原因。在根据原因给出解决方案。要是文章对您有用的话,记得点赞关注加收藏。

所有的故事都有一个结局。但幸运的是在生活中每个结局都会变成一个新的开始。

举报

相关推荐

0 条评论