前置常识：

  • 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的版本辨别