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

最新推荐文章于 2024-01-29 08:55:07 发布

司徒小北

最新推荐文章于 2024-01-29 08:55:07 发布

阅读量1.9k

点赞数 1

分类专栏： react Vue JavaScript 文章标签： JavaScript vue react html react.js

本文链接：https://blog.csdn.net/weixin_42333548/article/details/124426824

版权

JavaScript 同时被 3 个专栏收录

55 篇文章 5 订阅

订阅专栏

Vue

49 篇文章 1 订阅

订阅专栏

react

34 篇文章 2 订阅

订阅专栏

点击其他区域，隐藏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();
  };