I've got this HTML element:

<div class=list-group>

    <a href=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>

And this Javascript:

return new Vue({

    methods: {

        showDetails: function (notification, event) {

          this.notification = notification



          console.info(event.target)

        }

    }

}

The problem is that event.target return the exact element I click. That means it can be the a element, or one of it's children (h4 or p).

How do I get the a element (the element with the @click handler), even if the user clicks on one of it's children?