点击其他区域，隐藏弹窗或各种元素的原理

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

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

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

但那个div不能被点击事件影响，所以要在div的点击事件上添加阻止事件冒泡

event.nativeEvent.stopImmediatePropagation()，就是阻止div里的【点击】这个动作层层上传，不让这次点击被document监听到。

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

以下基于react框架做演示

1、初始化页面的时候再document上挂载click方法，点击执行目标元素隐藏操作（设为false）

const onHideContents = () => setShowContents(false);

 useEffect(() => {
    document.addEventListener('click', onHideContents);
    return () => {
      document.removeEventListener('click', onHideContents);
    };
  }, []);

2、在元素内部父元素上添加click 阻止冒泡时间方法即可, 如果内部有多个父级，给多个父级添加click

主要方法：event.nativeEvent.stopImmediatePropagation();

<div onClick={subscriptStopBubble}></div> 



 const subscriptStopBubble = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.nativeEvent.stopImmediatePropagation();
  };

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！通过公众号可加我vx拉群