推荐用 event.target.matches() 判断特定 class 元素，支持复杂选择器；若仅检测自身 class 用 classlist.contains()；嵌套结构用 closest() 向上查找；需先判断 e.target 是否为 element 节点以防报错。

不能直接在父级容器上用 target 判断“是不是特定 class 元素”，因为 target 是事件对象的属性，不是 CSS 选择器或匹配方法。但你可以通过事件委托 + event.target 结合 classList.contains() 或 matches() 来实现这个目的。

用 event.target.matches() 精准判断

这是最推荐的方式：监听父容器的点击事件，然后检查 event.target 是否匹配某个 CSS 选择器（比如 .btn-primary）。

document.querySelector('.container').addEventListener('click', function (e) {
  if (e.target.matches('.special-item')) {
    console.log('点中了带 .special-item 的元素');
    // ✅ 支持后代元素、伪类（如 .special-item:hover），且不依赖 class 顺序
  }
});

用 event.target.classList.contains() 判断 class 存在

适用于只需要检测某个 class 是否存在，且目标是元素自身（不关心是否匹配复杂选择器）：

document.querySelector('.container').addEventListener('click', function (e) {
  if (e.target.classList.contains('delete-btn')) {
    console.log('点中了删除按钮');
    // ⚠️ 注意：只检测元素自身是否有该 class，不匹配子元素上的同名 class（除非你明确要这样）
  }
});

注意事件冒泡与目标元素层级

点击子元素时，event.target 是**最深被点击的那个元素**，未必是你期望的“有 class 的元素”。常见误区：

• 如果 .special-item 内还有 <span></span> 或 <i></i>，点击图标时 target 是图标元素，它可能没有那个 class
• 解决办法：向上查找最近的符合条件的祖先（包括自己）

document.querySelector('.container').addEventListener('click', function (e) {
  const item = e.target.closest('.special-item');
  if (item) {
    console.log('点中了 .special-item 或其内部任意位置');
    // ✅ closest() 自动处理嵌套结构，非常实用
  }
});

避免误判：排除非元素节点和无关标签

有时 event.target 可能是文本节点、<svg></svg>、<use></use> 等，直接调用 matches() 或 classList 会报错：

document.querySelector('.container').addEventListener('click', function (e) {
  // 先确保 target 是元素节点
  if (!(e.target instanceof Element)) return;

  if (e.target.matches('.action-btn')) {
    // 安全执行
  }
});