Цель события Click дает элемент или его дочерний, а не родительский элемент

Question

У меня есть этот HTML-элемент:

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

А это Javascript:

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

          console.info(event.target)
        }
    }
}

Проблема в том, что event.target возвращает точный элемент, который я нажимаю. Это означает, что это может быть элемент a или один из его дочерних элементов (h4 или p).

Как получить элемент a (элемент с обработчиком @click), даже если пользователь нажимает на одного из его дочерних элементов?

Answer 1

Альтернативное решение с CSS:

a * {
    pointer-events: none;
}

Элемент никогда не является целью событий указателя; однако указатель события могут предназначаться для его элементов-потомков, если эти потомки имеют события-указатели установлены в другое значение. В этих обстоятельствах события указателя вызовут слушатели событий на этом родительском элементе как по пути к / от потомка во время мероприятия фазы захвата / пузыря.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values

Answer 2

используйте event.currentTarget, который указывает на элемент, который вы прикрепили к слушателю. Оно не меняется по мере появления пузырей

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