javascript - Vue.js 事件目标为空？

Question

我有一个组件有两个样式按钮和一个相同的事件 “鼠标输入”。

<template>
  <div>
      <a 
          class="button red" 
          href="/about" 
          @mouseover="mouseEnter">  
          <svg viewBox="0 0 180 60">
              <path d="..."/>
          </svg>
          <span class="buttonSpan">About</span> 
      </a>
      <a 
          class="button green" 
          href="/contact" 
          @mouseover="mouseEnter">  
          <svg viewBox="0 0 180 60">
              <path d="..."/>
          </svg>
          <span class="buttonSpan">Contact</span>   
      </a>
  </div
</template>

当事件触发时，我想对鼠标悬停的按钮的路径 和span 执行一些操作。

我试图用 event.target 引用它们，但对于跨度，我得到的是空值，对于路径，一切正常。

methods: {
  buttonEnter(event) {
    const buttonPath = event.target.querySelector('path')
    const buttonSpan = event.target.querySelector('span')
    
    ...
}

我应该如何引用跨度？我还有其他办法吗？

Answer 1

事件目标将从您将监听器附加到的节点的子节点开始冒泡。使用 event.currentTarget