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

Question

我正在这个按钮上监听一个点击事件，该事件将运行Vue实例的toggleSubMenu()方法。我想要它，这样当点击按钮时，我可以得到event.target的parentNode，它将是类为sub-menu-sibling的div，然后是nextElementSibling，它将成为类为sub-menu的div。这是我的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

===UPDATE
我不知道event.currentTarget的存在。