React 中阻止事件冒泡的问题
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理事件捕获与冒泡DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。
事件处理器默认情况下,事件处理器是在事件的冒泡阶段执行,无论是直接设置元素的 考察下面的示例: <button onclick="btnClickHandler(event)">CLICK ME</button> 输出:
阻止事件的冒泡通过调用事件身上的 <button onclick="btnClickHandler(event)">CLICK ME</button> 输出:
一个阻止冒泡的应用场景常见的弹窗组件中,点击弹窗区域之外关闭弹窗的功能,可通过阻止事件冒泡来方便地实现,而不用这种方式的话,会引入复杂的判断当前点击坐标是否在弹窗之外的复杂逻辑。 document.addEventListener("click", () => { 但如果你尝试在 React 中实现上面的逻辑,一开始的尝试会让你怀疑人生。 React 下事件执行的问题了解 JS 中事件的基础后,会觉得一切都没什么复杂。但在引入 React 后,事情开始起变化。将上面阻止冒泡的逻辑在 React 里实现一下,代码大概像这样: function App() { 输出:
document 上的事件处理器正常执行了,并没有因为我们在按钮里面调用 那么问题出在哪? React 中事件处理的原理考虑下面的示例代码并思考点击按钮后的输出。 import React, { useEffect } from "react"; 现在对代码做一些变动,在 body 的事件处理器中把冒泡阻止,再思考其输出。 document.body.addEventListener("click", event => { 下面是剧透环节,如果你懒得自己实验的话。 点击按钮后的输出:
bdoy 上阻止冒泡后,你可能会觉得,既然 body 是按钮及按钮容器的父级,那么按钮及容器的事件会正常执行,事件到达 body 后, body 的事件处理器执行,然后就结束了。 document 上的事件处理器一个也不执行。 事实上,按钮及按钮容器上的事件处理器也没执行,只有 body 执行了。 输出:
通过下面的分析,你能够完全理解上面的结果。 SyntheticEventReact 有自身的一套事件系统,叫作 SyntheticEvent。叫什么不重要,实现上,其实就是通过在 document 上注册事件代理了组件树中所有的事件(facebook/react#4335),并且它监听的是 document 冒泡阶段。你完全可以忽略掉 SyntheticEvent 这个名词,如果觉得它有点让事情变得高大上或者增加了一些神秘的话。 除了事件系统,它有自身的一套,另外还需要理解的是,界面上展示的 DOM 与我们代码中的 DOM 组件,也是两样东西,需要在概念上区分开来。 所以,当你在页面上点击按钮,事件开始在原生 DOM 上走捕获冒泡流程。React 监听的是 document 上的冒泡阶段。事件冒泡到 document 后,React 将事件再派发到组件树中,然后事件开始在组件树 DOM 中走捕获冒泡流程。 现在来尝试理解一下输出结果:
理解 React 是通过监听 document 冒泡阶段来代理组件中的事件,这点很重要。同时,区分原生 DOM 与 React 组件,也很重要。并且,React 组件上的事件处理器接收到的 紧接着的代码的改动中,我们在 body 上阻止了事件冒泡,这样事件在 body 就结束了,没有到达 document,那么 React 的事件就不会被触发,所以 React 组件树中,按钮及容器就没什么反应。如果没理解到这点,光看表象还以为是 bug。 进而可以理解,如果在 document.addEventListener("click", event => { 输出:
所以,虽然都是监听 document 上的点击事件,但 解答前面按钮未能阻止冒泡的问题如果你已经忘了,这是相应的代码及输出。function App() { 输出:
到这里,已经可以解答为什么 React 组件中 button 的事件处理器中调用 问题的解决要解决这个问题,这里有不止一种方法。 用
|
React 中阻止事件冒泡的问题的更多相关文章
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- angularjs中阻止事件冒泡,以及指令的注意点
appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...
- Html 中阻止事件冒泡的三种方法比较
A:return false --->In event handler ,prevents default behavior and event bubbing . return ...
- jQuery阻止事件冒泡的例子
下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...
- react 阻止事件冒泡
前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...
- React阻止事件冒泡的正确打开方式
需求:点击导航list按钮出现侧弹框,点击空白处弹框消失 问题:绑定空白处的点击事件到document上,但是非空白处的点击也会触发这个点击事件,在react中如何阻止事件冒泡? 解决方法:e.sto ...
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...
随机推荐
- rsync+innotify做到同步式更新
innotify主要功能: 他是内核用于通知用户控件程序文件系统变化的机制. 也就是说,当服务器发生了任何的改动,内核都会知道并通知用户. rssync(做同步的)+innotify做到的就是实时的同 ...
- 下载网易云VIP音乐
有偿帮助.联系方式在个人信息里.
- 用ASP.NET Core 2.0 建立规范的 REST API
什么是REST REST 是 Representational State Transfer 的缩写. 它是一种架构的风格, 这种风格基于一套预定义的规则, 这些规则描述了网络资源是如何定义和寻址的. ...
- 拾人牙慧篇之——linux文件挂载,基于nfs的文件共享系统安装配置
一.写在前面 最近需要把阿里云上的四台服务器的项目迁移到客户提供的新的项目中,阿里云的项目平时开发启动的时候知道有个nfs文件系统,表现就是后台管理系统通过freemarker生成的HTML文件,自动 ...
- 使用Selenium对新浪微博模拟登录
Selenium的配置 在项目中引入Selenium库 下载chromedriver.exe 在项目代码中加入chromedriver位置的配置 使用Selenium Selenim语法 智能等待 隐 ...
- Linnux入门之简介
一.Linux简介 Minix(教授实验) -> Linux(大三学生Linus)企鹅作为吉祥物 linux主要分为内核版本和发行版本 linux 内核版本 :官网下载:https://www. ...
- linux 关于Apache默认编码错误 导致网站乱码的解决方案
Apache默认编码UTF-8在解析A网站的时候没有任何问题,当运行B网站时出现的"蝌蚪文"乱码问题 最近经常有同学在使用LAMP/WAMP时,遇到这样的编码错误问题: A网站 ...
- Python(2)深入Python函数定义
Python学习 Part2:深入Python函数定义 在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用: 1. 默认参数 最常用的一种形式是为一个或多个参数指定默认 ...
- PAT1056:Mice and Rice
1056. Mice and Rice (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mice an ...
- capwap学习笔记——初识capwap(二)(转)
2.5.1 AC发现机制 WTP使用AC发现机制来得知哪些AC是可用的,决定最佳的AC来建立CAPWAP连接. WTP的发现过程是可选的.如果在WTP上静态配置了AC,那么WTP并不需要完成AC的发现 ...