【已解决】监听 vue点击Div外层的事件，并实时销毁。

最新推荐文章于 2026-02-17 03:36:10 发布

原创最新推荐文章于 2026-02-17 03:36:10 发布 · 5.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

19 篇文章 2 人学习

订阅专栏查看详情

vue

当前文章被收录于：

vue

16 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个Vue.js中监听组件外部点击的实现方法。通过watch和document的addEventListener及removeEventListener，实现在组件显示时监听外部点击，并在组件隐藏时销毁事件监听，避免内存泄漏。当点击组件以外的区域时，将触发特定事件。

1、场景

在这里插入图片描述

2、代码

    watch:{
        show_login_out(newVal, oldVal){
            if(newVal === true){
                alert('开始监听')
                // 若显示，则监听失去焦点事件。
                document.addEventListener('click',this.click_out_side, true);
            }else{
                alert('事件销毁')
                // 不显示，销毁监听事件。
                document.removeEventListener("click", this.click_out_side, true);
            }
        }
    },
    methods:{
        click_out_side(e){
            if(!this.$el.contains(e.target)){
                alert('触发点击外面')
                this.show_login_out = false;
            }
        },
   }

标签

#vue #前端 #js #javascript