如何移除子组件元素的mousedown事件？Vue3+TypeScript场景

问题核心是事件冒泡：点击子组件内的日期选择器或状态选择器时，mousedown事件会向上冒泡到父组件绑定的@mousedown事件，导致意外触发displayProgress方法。以下是几种直接可行的解决方案：

方案一：在子组件内阻止事件冒泡（推荐） #

直接在目标选择器上添加@mousedown.stop修饰符，阻止事件向上冒泡到父组件。修改DashboardOrderCard.vue代码：

<el-card>
    <div class="body-wrapper">
        <div class="due-date-wrapper">
            <el-date-picker 
                class="date-picker"
                v-model="currentDueDate" 
                format="DD-MM-YYYY"
                :readonly="isCurrentUserSupervisor === false"
                @mousedown.stop  <!-- 阻止冒泡 -->
            />
        </div>
        <OrderStatusSelect 
            class="status-select"
            v-model:status="currentStatus"
            @mousedown.stop  <!-- 阻止冒泡 -->
        />
    </div>
</el-card>

方案二：自定义组件内部处理冒泡 #

如果OrderStatusSelect是你开发的自定义组件，也可以在组件内部的根元素上添加阻止冒泡的逻辑，避免在父组件重复写修饰符：

<!-- OrderStatusSelect.vue -->
<template>
    <div class="status-select-container" @mousedown.stop>
        <!-- 组件内部的选择器逻辑 -->
    </div>
</template>

方案三：父组件事件函数内判断目标元素 #

如果不想修改子组件代码，可以在父组件的事件处理函数中，判断点击目标是否属于选择器元素，若是则跳过执行逻辑：

// DashboardView.vue 的 <script setup>
const displayProgress = (order: OrderType, event: MouseEvent) => {
    const target = event.target as HTMLElement;
    // 检查目标是否是日期选择器/状态选择器或它们的后代元素
    if (target.closest('.date-picker') || target.closest('.status-select')) {
        return;
    }
    // 原本的displayProgress业务逻辑
}

同时修改父组件中事件绑定的写法，传递事件参数：

<DashboardOrderCard 
    v-for="(order, index) in pinnedOrders"
    :key="order.id"
    :id="'order-' + order.id"
    :order="order"
    @mousedown="(e) => displayProgress(order, e)"  <!-- 传递事件对象 -->
    @unpin-order="unpinOrder(index)"
/>

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