Klicken Sie auf das Ereignisziel, um das Element oder dessen untergeordnetes, nicht übergeordnetes Element zu erhalten

Ich habe dieses HTML-Element:

<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>

Und dieses Javascript:

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

          console.info(event.target)
        }
    }
}

Das Problem ist, dass event.target Gibt das genaue Element zurück, auf das ich klicke. Das heißt, es kann das sein a Element oder eines seiner untergeordneten Elemente (h4 oder p).

Wie bekomme ich die a Element (das Element mit der @click Handler), auch wenn der Benutzer auf eines seiner untergeordneten Elemente klickt?

verwenden event.currentTarget Dies zeigt auf das Element, das Sie dem Listener hinzugefügt haben. Es ändert sich nicht, wenn das Ereignis sprudelt

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

Alternative Lösung mit CSS:

a * {
    pointer-events: none;
}

Das Element ist niemals das Ziel von Zeigerereignissen; Allerdings können Zeigerereignisse auf seine Nachkommenelemente abzielen, wenn für diese Nachkommen Zeigerereignisse auf einen anderen Wert gesetzt sind. Unter diesen Umständen lösen Zeigerereignisse während der Ereigniserfassungs-/Blasenphasen gegebenenfalls Ereignis-Listener für dieses übergeordnete Element auf ihrem Weg zum/vom Nachkommen aus.

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