点击事件target返回元素或其子元素而非父元素的技术咨询

我懂你遇到的困扰——点击<a>标签里的标题或时间文本时，$event.target返回的是<h4>或<p>这类子元素，而非你真正想要操作的外层<a>标签。这是因为在事件冒泡机制中，target指向的是触发事件的原始元素，而不是绑定事件的父元素。

下面给你两种简单有效的解决办法：

方法1：使用$event.currentTarget #

currentTarget是绑定事件的元素（也就是这里的<a>标签），不管你点击的是它的哪个子元素，currentTarget始终指向绑定事件的那个父元素，这是最推荐的解决方案。

修改你的代码 #

保持HTML结构不变，在showDetails方法里用currentTarget获取目标元素：

<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>

在Vue的方法中处理：

methods: {
  showDetails(notification, event) {
    // 拿到绑定事件的<a>元素
    const targetAnchor = event.currentTarget;
    // 接下来就可以针对这个a元素做任何操作了
    console.log("点击的通知卡片:", targetAnchor);
    console.log("通知详情:", notification);
  }
}

你也可以直接把currentTarget作为参数传入方法，简化写法：

<a href="javascript:;" @click="showDetails(notification, $event.currentTarget)" class="list-group-item" ...>

对应的方法：

methods: {
  showDetails(notification, targetAnchor) {
    // 直接使用传入的a元素
    console.log(targetAnchor);
  }
}

方法2：阻止子元素的事件冒泡（可选） #

如果你不想让子元素触发父元素的事件冒泡，可以给子元素添加@click.stop指令，但这种方法不推荐，因为它会阻断正常的事件冒泡流程，可能影响其他需要冒泡的逻辑：

<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" @click.stop />
    <p class="list-group-item-text" v-text="notification.created_at|moment" @click.stop />
  </a>
</div>

此时点击子元素时，$event.target就会是<a>标签了，但这种方式不如第一种灵活通用。

优先推荐第一种方法，它既保留了正常的事件冒泡，又能精准拿到你需要的绑定事件的元素。

内容的提问来源于stack exchange，提问作者Stephan Vierkant