javascript - 单击事件目标给出元素或其子元素，而不是父元素

我有这个 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 处理程序的元素)，即使用户点击了其中一个子元素？

最佳答案

使用 event.currentTarget 指向您附加监听器的元素。它不会随着事件冒泡而改变

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

关于javascript - 单击事件目标给出元素或其子元素，而不是父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50149925/