应始终使用event.currentTarget作为交互主干，它稳定指向绑定监听的容器，避免因event.target漂移导致逻辑错乱；结合target判断有效点击区域，并在委托场景中用closest定位目标项再以其为currentTarget操作。
在电商秒杀页，用户疯狂点击按钮时，如果事件监听器绑在父容器（比如一个 .item-card 或 .seckill-btn-wrapper）上，而实际点击落在图标、文字、空隙等子元素上，event.target 就会是那些深层节点——此时若误用 target 去操作样式、发请求或触发状态，极易导致逻辑错乱：比如只给 span 加了 loading 类，按钮本身没响应；或重复提交因没锁住整个容器。
用 currentTarget 锁定操作主体，不随点击点漂移
event.currentTarget 始终是你调用 addEventListener 的那个元素，无论用户点的是按钮边缘、内部图标还是 padding 区域，它都稳定指向绑定监听的容器。这是高频点击下“不脱轨”的根本保障。
- 统一以
event.currentTarget作为交互主干：添加 loading 状态、禁用视觉反馈、触发动画、调用接口前校验，全部基于它 - 避免对
event.target直接调用.click()或.focus()，除非你明确要操作那个子节点（例如点击图标才展开详情） - 示例：点击商品卡片任意位置触发抢购，应始终操作卡片容器：
const card = event.currentTarget;
card.classList.add('loading');
fetchSeckillAPI(card.dataset.skuId);
结合 target 判断是否为有效点击区域
虽然容器要稳，但也要防误触——比如用户点到卡片右上角的关闭图标（×），本意是取消，不是抢购。这时需用 event.target 辅助意图识别：
- 用
event.target.closest('.seckill-trigger')查找最近的可操作区域（如带data-action="buy"的按钮或区域），而不是硬写if (target === currentTarget) - 排除装饰性子元素：
if (target.matches('i.close, .badge')) return;，提前中断非抢购意图 - 支持语义化点击：文字、图标、整个卡片 padding 都算有效，但遮罩层、关闭按钮、广告位不算
防重复点击必须作用于 currentTarget 本体
秒杀页最怕连点触发多次请求。禁用逻辑若只写在 target 上，用户快速点击两次（第一次点文字，第二次点图标），就会生成两个独立的 loading 状态，且无法互相感知。
- 正确做法：在事件开头就锁定容器本体：
const btn = event.currentTarget;
if (btn.hasAttribute('disabled')) return;
btn.setAttribute('disabled', '');
btn.classList.add('disabled'); - 配合
{ once: true }选项确保监听器只执行一次，再加一层防御 - 请求完成后，务必通过
currentTarget恢复状态，而非依赖 DOM 查询（可能已被销毁或复用）
委托场景下，currentTarget 是唯一可靠锚点
若用事件委托（如监听 #seckill-list），currentTarget 仍是列表容器，但你需要先从 target 找到对应商品项，再用该项的 currentTarget（即它自己）做操作——注意这里要区分两层：
- 外层委托监听器中：
event.currentTarget === #seckill-list（固定） - 用
event.target.closest('.seckill-item')找到被点击的商品项 - 对该项调用
item.addEventListener(...)或直接操作item——这个item就是你后续所有逻辑的currentTarget锚点 - 避免写成
event.currentTarget.querySelector(...)，那会错绑到列表容器上
