vue中使用contains判断点击事件，点击超出自身区域隐藏自己

那颗星好美

于 2021-07-14 10:27:37 发布

阅读量4.9k

点赞数 4

分类专栏： vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_42767631/article/details/118721501

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了一个在Vue应用中监听全局点击事件的方法，通过对比`ref`和原生JS获取DOM的区别，强调使用原生方式判断点击目标是否在特定元素区域内。当点击元素外部时，隐藏指定的组件。示例代码展示了如何添加事件监听器，并在点击事件中检查目标是否在`contentWrap`元素内，从而实现需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：ref方式获取的和js原生方式获取的dom类型不同，用原生的js获取dom方式代替ref方式，这样才能判断是否属于自身区域的。

mounted() {
    // 监听，除了点击自己，点击其他地方将自身隐藏
   document.addEventListener("click", e => {
      const contentWrap = document.getElementById("contentWrap");
       if (contentWrap) {
          if (!contentWrap.contains(e.target)) {
            this.isFlag = false;
          }
       }
   });
}

可参考这个博客文章：https://blog.youkuaiyun.com/ddx2019/article/details/107249615/