监听 vue点击Div外层的事件，并实时销毁

最新推荐文章于 2023-05-29 11:31:12 发布

云城雪华

最新推荐文章于 2023-05-29 11:31:12 发布

阅读量1.4k

点赞数

文章标签： html5 css3 vue.js es6 node.js

原文链接：https://blog.youkuaiyun.com/chanlingmai5374/article/details/98046443

版权

本文介绍如何在Vue中实现监听点击Div外层事件并实时销毁组件的技巧。通过使用watch监听属性变化，动态添加和移除document的点击事件监听器，确保当组件显示时能监听到失去焦点的事件，当组件隐藏时则销毁监听器，避免内存泄漏。

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

监听 vue点击Div外层的事件，并实时销毁

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;
            }
        },
   }