QCard绑定@blur无响应，如何实现失去焦点触发操作？

问题原因 #

QCard默认不是可聚焦元素（无tabindex属性），无法触发blur或focusout事件；即便强行绑定事件，浏览器也不会识别。另外，直接用blur会在点击卡片内部元素（比如QInput）时就触发，不符合“离开整个卡片才触发”的需求。

解决方案 #

1. 让QCard成为可聚焦元素：添加tabindex="0"属性，允许卡片接收焦点。
2. 使用focusout事件配合范围判断：利用focusout的冒泡特性，检查焦点是否真的离开卡片区域，避免内部元素切换焦点时误触发。

修改后的代码如下：

模板部分

<q-card bordered flat v-for="pill in loadedPerson?.Pills" :key="pill.ID" class="pill text-center bg-blue-1"
    tabindex="0" @focusout="handleCardFocusOut(pill)">
    <q-card-section class="q-pb-none">
        <div class="text-h4 text-bold">{{ pill.Name }}</div>
    </q-card-section>
    <q-card-section class="flex row q-pt-none flex-center items-center">
        <q-input maxlength="2" size="2" dense borderless v-model="pill.Amount"
            class="text-h4 text-bold amountPills"></q-input>
        <q-icon size="xl" name="las la-plus-circle" class="cursor-pointer" @click="pill.Amount++"></q-icon>
        <q-icon size="xl" name="las la-minus-circle" class="cursor-pointer" @click="pill.Amount--"></q-icon>
    </q-card-section>
</q-card>

脚本部分

methods: {
    handleCardFocusOut(pill, event) {
        // 判断焦点是否仍在卡片内部
        const isInsideCard = event.currentTarget.contains(event.relatedTarget);
        if (!isInsideCard) {
            this.updatePill(pill);
        }
    },
    updatePill(pill) {
        // 这里执行你的更新逻辑
        console.log(`更新药品：${pill.Name}，数量：${pill.Amount}`);
    }
}

可选：移除焦点默认样式

添加CSS消除卡片获得焦点时的默认轮廓：

.pill:focus {
    outline: none;
}

原理说明 #

• tabindex="0"：让QCard成为可聚焦元素，允许浏览器跟踪其焦点状态。
• focusout事件：在元素或其子元素失去焦点时触发（支持冒泡），通过event.relatedTarget获取焦点转移的目标元素，再用contains方法判断目标是否属于卡片内部，确保只有真正离开卡片时才执行更新操作。

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