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

use 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