实现多层DIV叠加的js事件穿透，stopPropagation
2022-02-23 本文已影响0人
何家一枝花
1:通常情况下，我们在编写弹框的时候都会出现一个蒙层，如果弹框没有设置关闭按钮，例如下图，需要点击除了弹框意外的任何地方，来关闭蒙层，这个时候怎么解决呢，首先难点在：弹框是包含在蒙层 div结构里面的，
image.png
div结构体如图：
image.png
1:方法：比较灵活的方法是将 上层蒙层，和弹框分离开；
image.png
2：方法：使用stopPropagation
知识点：stopPropagation() 方法防止调用相同事件的传播。传播意味着向上冒泡到父元素或向下捕获到子元素。从而点击蒙层上面的弹框，组织事件往弹框层向他的父级传递事件：优雅的解决问题！
image.png
