Vue3：如何在 parent DOM 上接收@click 事件？

Question

我在 Vue3 模板中有以下结构：

template:
/*html*/
`<div class='element1' @click='onClick'>
    <img :src='image_url' />
    <p>{{desc_text}}</p>
</div>`,
data() {
    return {
        image_url: "path/to/image",
        desc_text: "Some text goes here"
    }
},
methods: {
    onClick(e) {
        console.log(e);
    }
}

根据我点击的位置，控制台输出 e.target 为 <img>、<p> 或 <div class='element1'>，并且 e.path 设置为元素数组，从指针下方最顶端的元素到 bottom-most，而 currentTarget 设置为 null.

我正在寻找一种解决方案，其中将使用 e.target 调用事件处理程序，该事件处理程序指向添加了 @click 侦听器的元素，在本例中为 <div class='element1'>。不要指向它的任何一个 children.

我一直在查看有关事件气泡的 Vue3 文档，但到目前为止没有任何修饰符符合我的需要。

例如 @click.self 仅当 e.target 是具有事件侦听器的元素时才会触发，但是，如果指针位于其任何 children 之上，则不会触发。

现在，我在所有 children 元素上使用 pointer-events: none; 样式我不想有自己的指针事件处理，它似乎有 sufficient coverage。但是，如果 Vue 本身没有任何选项来处理这种情况，我会感到很惊讶，也许我错过了它？

我已经通读了 Vue3 Event Modifiers 文档，但其中没有列出任何选项。

在某些情况下，我在一个元素中有十几个 sub-elements（例如，一张显示图像、标题、段落等的卡片），我希望整个元素都是一个大按钮，可以点击打开，只设置了一个 @click 事件处理程序。

Answer 1

您可以在不使用事件目标但将参数传递给 onClick 处理程序的情况下获得相同的结果（可能更好）。

渲染可点击列表时我通常做的是传递整个项目

<div v-for="element in elements" :key="'element' + item.id" class="'element' + element.id" @click="onClick(element)">
    <img :src='element.image_url' />
    <p>{{element.desc_text}}</p>
</div>

然后处理 onclick 变得容易，因为您已经拥有了您想要的元素

onClick(element) {
    console.log(element);
}

Vue3：如何在 parent DOM 上接收@click 事件？

Vue3: How to receive @click event on parent DOM?

html

javascript

vuejs3