如何实现点击页面空白区域时自动关闭指定块级元素

核心逻辑 #

• 为目标块添加显隐控制的响应式状态
• 区分块内、块外点击事件，避免点击块本身时误触发关闭
• 监听全局点击事件，点击空白区域时触发块关闭
• 组件销毁时移除全局事件监听，避免内存泄漏

基础实现代码 #

<template>
  <div>
    <div 
      class="wrapper" 
      v-if="isShow"
      @click.stop
    ></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      // 控制块的显隐状态，可根据初始需求调整默认值
      isShow: true
    }
  },
  mounted() {
    // 绑定全局点击事件
    document.addEventListener('click', this.closeWrapper)
  },
  beforeUnmount() {
    // 卸载前移除事件，避免内存泄漏
    document.removeEventListener('click', this.closeWrapper)
  },
  methods: {
    closeWrapper() {
      this.isShow = false
    }
  }
};
</script>

<style scoped>
.wrapper {
  width: 300px;
  height: 150px;
  background: green;
  margin: auto;
}
</style>

实现原理：通过@click.stop修饰符拦截块内的点击事件冒泡，点击块本身或块内元素时不会触发全局的关闭逻辑，只有点击块外的空白区域时，事件冒泡到document才会执行关闭操作。

复杂场景可选实现 #

如果需要保留块内事件的冒泡逻辑，可通过判断点击目标的所属区域实现，无需使用@click.stop：

<template>
  <div>
    <div 
      class="wrapper" 
      v-if="isShow"
      ref="wrapRef"
    ></div>
  </div>
</template>

<script>
export default {
  // 其余配置与基础实现一致
  methods: {
    closeWrapper(e) {
      // 点击目标不在块内时触发关闭
      if (!this.$refs.wrapRef.contains(e.target)) {
        this.isShow = false
      }
    }
  }
};
</script>

注意事项 #

• Vue 2 适配：如果使用Vue 2版本，需要将beforeUnmount钩子替换为beforeDestroy
• 初始显隐状态可根据业务需求修改isShow的默认值，也可改用v-show控制块的显隐

内容的提问来源于stack exchange，提问作者Synchro