当子元素触发事件时，如何访问事件的实际目标？

Question

我正在监听此按钮的点击事件，这将是 Vue 实例的运行 toggleSubMenu() 方法。我想要它，以便在单击按钮时我可以获得 event.target 的 parentNode，这将是 div 和 sub-menu-sibling 的 class，并且那么 nextElementSibling 就是 div，class 为 sub-menu。这是我的 HTML 结构。

<div class="sub-menu-sibling">
  <button @click.stop="toggleSubMenu($event)" class="btn" type="button" name="button">
    <svg class="bi bi-chevron-right" width="14px" height="14px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z" clip-rule="evenodd" />
    </svg>
    Show Menu
  </button>
</div>
<div class="sub-menu">
  <!-- menu items -->
</div>

这是我的 Vue 应用

const Menu = Vue.createApp({
  methods: {
    toggleSubMenu: function(event) {
      const subMenus = document.querySelectorAll("#categoriesMenu .sub-menu");
      let targetSubMenu = event.target.parentElement.nextElementSibling;

      targetSubMenu.classList.toggle('show');

      subMenus.forEach((sub) => {
        sub.classList.contains('show') && sub != currentSubMenu ? sub.classList.remove('show') : ''
      });
    }
  }
})

问题是，当用户直接点击按钮内的svg图标时，它变成了event.target，这打破了我的整个预期。如何让它主要仅在按钮表面上收听？

Answer 1

您可以在操作按钮上应用停止传播

 const stopPropagation = event => {
    event.cancelBubble = true
    event.preventDefault()
    if (event.stopPropagation) event.stopPropagation()
  }

和

const toggleSubMenu = () => {
 stopPropagation()
 ...
}

Answer 2

===更新
我不知道 event.currentTarget 存在。

当子元素触发事件时，如何访问事件的实际目标？

How do I access an event's actual target when a child element triggers the event?

javascript

frontend

dom

vuejs3