Vue.js如何实现仅点击卡片外区域时才关闭遮罩层

这是DOM事件冒泡机制导致的问题：

• 浏览器默认的事件传播规则是：事件会从触发的最内层元素，沿DOM树向上逐层传递到所有父级元素
• 你写的.card是.overlay的子元素，哪怕用absolute定位改变了渲染位置，DOM父子关系没有改变，点击卡片时事件会冒泡到外层遮罩层，触发绑定的关闭逻辑
• 额外注意：你原有代码中@click="!displayOverlay"的写法本身无法生效，这行代码只是对变量做取反运算，没有把结果重新赋值给displayOverlay，正确的关闭逻辑需要写赋值操作displayOverlay = false

两种方案任选其一即可，都能实现「点击卡片不关闭、点击遮罩空白区域关闭」的效果。

方案1：阻止卡片区域的事件冒泡（最简便） #

利用Vue的事件修饰符.stop，直接阻断卡片元素的点击事件向上冒泡，事件到卡片层就终止，不会传到遮罩层触发关闭。
修改后代码：

<div v-if="displayOverlay" class="overlay" @click="displayOverlay = false">
  <!-- 加.stop修饰符阻止冒泡 -->
  <div class="card" @click.stop> Hello </div>
</div>

<style>
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.card{
 position: absolute;
 bottom: 400px;
 /* 补全卡片基础样式避免默认样式异常 */
 width: 320px;
 padding: 24px;
 background: #fff;
 border-radius: 8px;
}
</style>

说明：@click.stop是Vue对原生event.stopPropagation()方法的封装修饰符，不需要额外写事件处理函数，直接加在元素上即可生效。如果卡片内部还有按钮、输入框等其他交互元素，这种写法不会影响卡片内部的事件响应。

方案2：判断点击事件的触发源 #

如果不想给卡片加额外的事件绑定，可以在遮罩层的点击回调里判断事件来源：只有当点击的元素就是遮罩层本身时，才执行关闭逻辑；如果点击的是遮罩层内部的卡片/卡片子元素，就不响应关闭。
修改后代码：

<template>
  <div 
    v-if="displayOverlay" 
    class="overlay" 
    @click="handleOverlayClose"
  >
    <div class="card"> Hello </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const displayOverlay = ref(true)
const handleOverlayClose = (e) => {
  // e.target是实际触发点击的元素，e.currentTarget是绑定事件的遮罩层元素
  // 两者相等时说明点击的是遮罩层本身，不是内部元素
  if (e.target === e.currentTarget) {
    displayOverlay.value = false
  }
}
</script>

<style>
/* 样式和方案1一致 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.card{
 position: absolute;
 bottom: 400px;
 width: 320px;
 padding: 24px;
 background: #fff;
 border-radius: 8px;
}
</style>

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