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

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

<template>
  <div @click="handleClick">
    <div class="child child1">
      <button>Click Mebutton>
      <span>Click Me1span>
      <div>Click Me2div>
    div>
    <div class="child child1">
      <button>Click Mebutton>
      <span>Click Me1span>
      <div>Click Me2div>
      <div>Click Me3div>
      <p>clicep>
    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>