如何点击Vuetify卡片时打开弹窗，点击子元素时不触发？

问题 #

使用最新版Vuetify，将v-card作为v-dialog的激活器后，点击卡片内的表单输入框、按钮等子元素也会触发弹窗，需要实现仅点击卡片空白区域（非子元素）时才打开弹窗。

解决方案 #

通过手动监听卡片点击事件，判断点击源是否为卡片本身，避免子元素触发弹窗：

<template>
  <v-app>
    <v-main>
      <v-dialog v-model="isDialogOpen">
        <!-- 移除activator插槽，手动绑定点击事件 -->
        <v-card @click="handleCardClick">
          <v-card-title>If (only) card was clicked it should open a dialog</v-card-title>
          <v-card-text>
            <v-form>
              <v-text-field label="This is just" />
              <v-text-field label="a very basic form" />
              <v-text-field label="inside a card" />
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn>Some action</v-btn>
            <v-spacer />
            <v-btn>Other action</v-btn>
          </v-card-actions>
        </v-card>
        <!-- 弹窗内容放在default插槽 -->
        <template v-slot:default>
          <v-card>Dialog goes here</v-card>
        </template>
      </v-dialog>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isDialogOpen = ref(false)

const handleCardClick = (event: MouseEvent) => {
  // 仅当点击的是卡片本身时，打开弹窗
  if (event.target === event.currentTarget) {
    isDialogOpen.value = true
  }
}
</script>

核心逻辑 #

• 取消v-dialog的activator自动绑定，避免子元素继承点击事件
• 通过event.target（实际触发点击的元素）和event.currentTarget（绑定事件的卡片元素）的比对，确保只有点击卡片本身时才触发弹窗

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