React点击空白处关闭弹框

发布于:2023-03-30 ⋅ 阅读:(565) ⋅ 点赞:(0)

前置知识:

React的合成事件系统:reactv17之前,事件代理到document上,冒泡阶段执行。
所以执行顺序为:原生dom事件-》React合成事件-》原生ducument事件。

并且React合成事件封装了stopPropagation方法,e.stopPropagation可以阻塞合成事件之间的冒泡,不能阻止合成事件冒泡到原生ducument监听,因为stopPropagation只能阻止事件冒泡至其父节点。

stopPropagation是只能阻止事件冒泡至其父节点,而stopImmediatePropagation既能阻止事件冒泡至父节点,也能阻止当前节点上其他同类型事件的触发,阻止的同类型事件需要是后绑定的。
注意react合成事件并没有封装stopImmediatePropagation,有需要用e.nativeEvent.stopImmediatePropagation

reactv17前,React 将事件委托到 document 上,而在react17中,则委托到根节点。

问题: 点击页面任意空白处,关闭弹框
需注意:不要影响到弹框内部的点击事件
两种方案:

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

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


网站公告

今日签到

点亮在社区的每一天
去签到