React点击空白处关闭弹框

前置知识:

  • React的合成事件系统:reactv17之前,事件代理到document上,react17和react18中,则委托到根节点。冒泡阶段执行。
  • 执行顺序为:原生dom事件-》React合成事件-》原生ducument事件
    引用
  • React合成事件封装了stopPropagation方法,e.stopPropagation可以阻塞合成事件之间的冒泡,不能阻止合成事件冒泡到原生ducument监听,因为stopPropagation只能阻止事件冒泡至其父节点
    引用
  • stopPropagation是只能阻止事件冒泡至其父节点,而stopImmediatePropagation既能阻止事件冒泡至父节点,也能阻止当前节点上其他同类型事件的触发,阻止的同类型事件需要是后绑定的
  • 注意react合成事件并没有封装stopImmediatePropagation,有需要用e.nativeEvent.stopImmediatePropagation

问题: 点击页面任意空白处,关闭弹框

需注意:不要影响到弹框内部的点击事件

两种方案:

  1. 在原生ducument上监听click事件,捕获到就关闭弹框
    在弹框内部绑定的click事件中阻止冒泡,reactv17前用e.nativeEvent.stopImmediatePropagation, reactv17和reactv18用e.stopPropagation
  2. 在弹框和页面之间设置一个覆盖整个页面的透明蒙层,点击蒙层就关闭弹框

对于方案1中需要注意React的版本区分


清晖素衫
落花无言,愿人淡如菊,心素如简

认识生活的真相后仍然热爱生活,是真正的英雄

95 声望
2 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

认识生活的真相后仍然热爱生活,是真正的英雄

95 声望
2 粉丝
宣传栏