El objetivo del evento de clic proporciona un elemento o es un elemento secundario, no un elemento principal

Tengo este elemento HTML:

<div class="list-group">
    <a href="https://stackoverflow.com/questions/50149925/javascript:;" @click="showDetails(notification, $event)" class="list-group-item" v-for="notification in notifications" :key="notification.id">
        <h4 class="list-group-item-heading">{{ '{{ notification.title }}' }}</h4>
        <p class="list-group-item-text">{{ '{{ notification.created_at|moment }}' }}</p>
    </a>
</div>

Y este JavaScript:

return new Vue({
    methods: {
        showDetails: function (notification, event) {
          this.notification = notification

          console.info(event.target)
        }
    }
}

El problema es ese event.target devolver el elemento exacto en el que hago clic. Eso significa que puede ser el a elemento, o uno de sus hijos (h4 o p).

¿Cómo obtengo el a elemento (el elemento con el @click controlador), incluso si el usuario hace clic en uno de sus hijos?

usar event.currentTarget que apunta al elemento que adjuntó al oyente. No cambia a medida que el evento burbujea.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Solución alternativa con CSS:

a * {
    pointer-events: none;
}

El elemento nunca es el destino de los eventos de puntero; sin embargo, los eventos de puntero pueden apuntar a sus elementos descendientes si esos descendientes tienen eventos de puntero establecidos en algún otro valor. En estas circunstancias, los eventos de puntero activarán detectores de eventos en este elemento principal según corresponda en su camino hacia/desde el descendiente durante las fases de captura/burbuja de eventos.

Árbitro: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values