Tengo la siguiente estructura en la plantilla 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); } }

Dependiendo de dónde haga clic, la consola genera e.target como <img> , <p> o <div class='element1'> , y tendrá e.path configurado en una matriz de elementos, desde el elemento que estaba en la parte superior debajo del puntero hacia la parte inferior, mientras que currentTarget se establece en null .

Estoy buscando una solución en la que se llame al controlador de eventos con e.target que apunte al elemento que tiene @click listener agregado, en este caso, <div class='element1'> . No señalar a ninguno de sus hijos.

He estado mirando la documentación de Vue3 sobre las burbujas de eventos, pero hasta ahora ningún modificador se ajusta a mis necesidades.

Por ejemplo @click.self solo se activará si e.target es el elemento que tiene el detector de eventos; sin embargo, si el puntero estaba sobre cualquiera de sus elementos secundarios, no se activará.

En este momento, uso pointer-events: none; estilo en todos los elementos secundarios No quiero tener su propio manejo de eventos de puntero, que parece tener suficiente cobertura . Sin embargo, me sorprende que Vue no tenga ninguna opción por sí solo para manejar este caso, ¿tal vez me lo estoy perdiendo?

He leído el documento Modificadores de eventos de Vue3 , pero ninguna opción enumerada allí hace esto.

En algunos casos, tengo una docena de subelementos en un elemento (p. ej., una tarjeta que muestra una imagen, un título, un párrafo, etc.) y me gustaría que el elemento completo sea un botón grande en el que hacer clic, con solo un @click conjunto de controladores de eventos.