react，点击其他区域，隐藏弹窗或各种div原理

感谢：1、https://www.cnblogs.com/lihuanqing/p/6295685.html，强推

2、https://blog.csdn.net/weixin_34393428/article/details/86846971

 

这篇写给跟我一样的小白。

上面两个链接已经足够清晰，此处记录一下我个人的理解。

 

点击其他区域，隐藏div的原理：

在document上挂载监听click事件，这时候点击所有地方都会触发这个事件（事件里根据个人需求，把控制显示的变量改为false等等）

由于点击所有地方都会触发事件，所以这时点击div内部也会触发。

但那个div不能被点击事件影响，所以要在div的点击事件上添加阻止事件冒泡（e.nativeEvent.stopImmediatePropagation()），就是阻止div里的【点击】这个动作层层上传，不让这次点击被document监听到。

这样就可以完成点击div以内的区域无影响，点击外部区域隐藏div了。