当前位置: 首页 > news >正文

诡异!React stopPropagation失灵

前言

先来看这
故事的开头是这样的:写代码的过程中,发现在内层用stopPropagation阻止绑定在document上的事件的时候,是没办法做到的,只可以阻止outClick事件的触发。

class ExampleApplication extends React.Component {
    componentDidMount() {
        document.addEventListener('click', () => {
            alert('document click');
        })
    }

    outClick(e) {
        console.log(e.currentTarget);
        alert('outClick');
    }
    
    onClick(e) {
        console.log(e.currentTarget);
        alert('onClick');
        e.stopPropagation();
    }
    render() {
        return <div onClick={this.outClick}>
            <button onClick={this.onClick}> 测试click事件 </button>
        </div>
    }
}

关于这个问题的解释,网上五花八门,有些将其归结为是由于事件委托的原因,例如这篇文章里说

我们直接在jsx模板上绑定的事件,都是委托在了document上,那自然要比直接在dom上绑定的事件慢了,等document收到事件后才去e.stopPropagation(),太晚了

其实从上面例子的输出: 由'onClick',再到'document click'可知,其实原生document上绑定的事件时最后执行的,所以并不是因为document收到事件快慢的原因而导致这个问题。

真相

真相只有一个,那就是:
出现上述bug的主要原因是混用浏览器原生事件跟React合成事件

详细解释:React有自己的一套事件处理机制,它会将所有的事件都绑定在document上,然后再用dispatchEvent统一分发,这时候分发的是合成事件
onClick(e)这时候拿到的e其实是合成事件,只能阻止合成事件的冒泡。

举个栗子来验证一下


class ExampleApplication extends React.Component {
    componentDidMount() {
        document.addEventListener('click', () => {
            alert('document click');
        })
        document.getElementById('div1').addEventListener('click', () => {
            alert('原生outClick');
        })
    }

    outClick(e) {
        console.log(e.currentTarget);
        alert('合成outClick');
    }
    
    onClick(e) {
        console.log(e.currentTarget);
        alert('onClick');
        e.stopPropagation();
    }
    render() {
        return <div id="div1" onClick={this.outClick}>
            <button onClick={this.onClick}> 测试click事件 </button>
        </div>
    }
}

做了点小改动,就是外层的div绑定的函数用原生的方式跟jsx的方式都绑定一次,所以最终的输出为

'原生outClick', 'onClick','document click'

所以button回调函数里的stopPropagation只能阻止合成事件的冒泡,而对于原生绑定的,则不行。

解决方法

解决方法有几种,我个人认为最简单的就是直接在onClick里利用[event.stopImmediatePropagation()][2]。原理是这样的:

对于例子一里,document其实绑定了两个事件:

// react 合成事件, dispatchEvent里面执行回调函数
document.addEventListener('click', dispatchEvent);

// 浏览器原生
document.addEventListener('click', () => {
   alert('document click');
})

dispatchEvent里的stopImmediatePropagation可以使得绑定在document上的其他事件就不会被触发

    onClick(e) {
        console.log(e.currentTarget);
        alert('onClick');
        e.nativeEvent.stopImmediatePropagation();
    }

当然本篇文章只是为了抛砖引玉,重点是下一篇的react事件机制,欢迎继续收看。

相关文章:

  • Unix环境高级编程(四)数据系统文件和信息
  • 算法初级之二
  • iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
  • 人民日报发声,区块链成“兵家必争之地”,或成“国家战略”
  • iOS下JS与OC互相调用(八)--Cordova详解+实战
  • itextsharp display:none无效的bug
  • SaaS型平台产品的POS营销经营策略
  • BeanUtils工具类的使用
  • Linux配置虚拟网站主机
  • 阿里云ECS服务器安装jdk
  • 素材哪里找?一个好的图库
  • POJ1631 LIS模板
  • pyqt5 QGraphicsView颜色动画问题(不兼容,运行不了动画)
  • Java Eclipse和MyEclipse快捷键
  • linux 使用fdisk分区扩容,看介绍命令(未完)
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • docker-consul
  • Fabric架构演变之路
  • JavaWeb(学习笔记二)
  • jQuery(一)
  • JS 面试题总结
  • 读懂package.json -- 依赖管理
  • 翻译:Hystrix - How To Use
  • 分布式事物理论与实践
  • 你真的知道 == 和 equals 的区别吗?
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 如何利用MongoDB打造TOP榜小程序
  • 如何用vue打造一个移动端音乐播放器
  • 使用API自动生成工具优化前端工作流
  • 用Python写一份独特的元宵节祝福
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • #每日一题合集#牛客JZ23-JZ33
  • (3)(3.5) 遥测无线电区域条例
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (BFS)hdoj2377-Bus Pass
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (分布式缓存)Redis分片集群
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (三)mysql_MYSQL(三)
  • (一)Neo4j下载安装以及初次使用
  • (转)h264中avc和flv数据的解析
  • (转)socket Aio demo
  • (转)菜鸟学数据库(三)——存储过程
  • (转)大型网站的系统架构
  • *1 计算机基础和操作系统基础及几大协议
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .NET教程 - 字符串 编码 正则表达式(String Encoding Regular Express)
  • .NET框架类在ASP.NET中的使用(2) ——QA