單擊事件目標給出元素或其子元素，而不是父元素

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元素，或者它的a元素（ h4或p ）。

即使用戶單擊其中一個子元素，我如何獲取a元素（帶有@click處理程序的元素）？

Answer 1

使用event.currentTarget指向您附加偵聽器的元素。 它不會隨着事件冒泡而改變

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

Answer 2

使用 CSS 的替代解決方案：

a * {
    pointer-events: none;
}

元素永遠不是指針事件的目標； 但是，如果這些后代將指針事件設置為其他值，則指針事件可能會針對其后代元素。 在這些情況下，指針事件將在事件捕獲/冒泡階段期間，在它們往返后代的途中適當地觸發此父元素上的事件偵聽器。

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