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

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" v-text="notification.title" />
        <p class="list-group-item-text" v-text="notification.created_at|moment" />
    </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

使用

event.currentTarget

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

Answer 2

CSS 的替代解决方案：

a * {
    pointer-events: none;
}

元素永远不是指针事件的目标；然而，指针 事件可以针对其后代元素，如果这些后代有 指针事件设置为其他值。在这种情况下， 指针事件将触发该父元素上的事件侦听器，如下所示 适合在活动期间往返后代的途中 捕获/气泡相。

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