点击事件目标返回的是元素本身或其子元素，而不是父元素。

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处理程序）？

- Stephan Vierkant

---

你尝试过将 this 传递给你的函数 showDetails 吗？像这样 showDetails(notification, $event, this)，你的第三个参数应该是你的锚点。 - Kaddath

你尝试过使用this代替event.target吗？ - D. Pardal

不会，this 将返回 Window 实例本身。 - Stephan Vierkant

Answer 1

使用event.currentTarget，它指向您附加侦听器的元素。当事件冒泡时，它不会改变。

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

- ibrahim tanyalcin

---

请注意，您只会得到对象而不是事件，就好像它是针对该元素的。例如，offsetX和offsetY仍然相对于子元素，而不是您实际附加事件侦听器的元素（是的，这非常令人困惑）。 - Johncl

Answer 2

CSS的另一种解决方案:

a * {
    pointer-events: none;
}

该元素不会成为指针事件的目标；但是，如果该后代元素具有设置为其他值的指针事件，则指针事件可能会针对其后代元素。在这些情况下，在事件捕获/冒泡阶段期间，指针事件将在适当的情况下触发此父元素上的事件侦听器，以便在前往/从后代期间进行处理。

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

- Itang Sanjana