Question

我有一个带有两个样式按钮和一个相同事件的组件＆＃34;的MouseEnter＆＃34 ;.

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

当事件触发时，我想对悬停的按钮的路径和范围执行某些操作。

我试图用 event.target 来引用它们，但是对于跨度我得到null，并且路径一切正常。

＆＃13;

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

＆＃13;

我应该如何参考跨度？还有其他办法吗？

Answer 1

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

Vue.js事件目标是否为空？

1 个答案: