利用事件委托和冒泡 判断点击了哪个元素或该元素的子级元素

概述： 通过 event.composedPath() 拿到事件冒泡路径，再循环匹配 获取所需的dom

<template>
  <div @click="handleClick">
    <div class="child child1">
      <button>Click Me</button>
      <span>Click Me1</span>
      <div>Click Me2</div>
    </div>
    <div class="child child1">
      <button>Click Me</button>
      <span>Click Me1</span>
      <div>Click Me2</div>
      <div>Click Me3</div>
      <p>clice</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const composedPath = event.composedPath();
		// console.log('点击事件冒泡的 DOM 列表：', composedPath);
      for (const element of composedPath) { //  注意防止子级类名和父级类名相同 child
        if (element.classList && element.classList.contains('child')) {
          console.log('找到指定类名为 child 的 DOM 元素:', element);
          break;
        }
      }
    }
  }
};
</script>