vue事件委托 子元素中嵌套了其他元素 获取dateset

在 Vue 中实现事件委托可以使用 v-on 指令和事件修饰符。针对子元素中嵌套了其他元素的情况，可以使用事件捕获和事件冒泡机制来实现事件委托。

假设父元素是一个 ul，子元素是 li，li 中包含一个 span 元素，我们可以使用事件冒泡机制来代理 li 和 span 元素的点击事件，示例代码如下：

<template>
  <ul v-on:click="handleClick">
    <li data-index="1">
      <span>item 1</span>
    </li>
    <li data-index="2">
      <span>item 2</span>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const target = event.target
      if (target.tagName === 'LI') {
        console.log(target.dataset.index)
      } else if (target.tagName === 'SPAN') {
        console.log(target.parentNode.dataset.index)
      }
    }
  }
}
</script>

在 handleClick 方法中，我们通过 event.target 获取到当前被点击的元素，如果是 li 元素，则直接获取其 dataset.index 的值；如果是 span 元素，则获取其父元素 li 的 dataset.index 值。

需要注意的是，在使用事件委托时，我们需要确保事件冒泡不被阻止，否则事件将无法正确地冒泡到父元素上。