事件委托实现多选卡片交互的核心是利用事件冒泡，在父容器监听点击事件，通过event.target.closest('.card')识别卡片，用数组管理data-id选中状态，并支持Ctrl/Cmd及Shift多选。
事件委托实现多选卡片交互，核心是利用事件冒泡机制，在父容器上监听点击事件，再根据实际点击的子元素（卡片）动态切换选中状态。
绑定事件到父容器
不要给每个卡片单独绑定 click 事件，而是把监听器加在它们共同的父容器上（比如 <div class="card-list">），避免大量重复监听器，提升性能和可维护性。
<ul>
<li>确保父容器有明确的标识（如 class 或 id），便于精准获取</li>
<li>使用 <code>addEventListener 添加事件，推荐用事件捕获或冒泡默认阶段即可
onclick 属性，不利于解绑和扩展识别被点击的卡片
在事件回调中，通过 event.target 找到真正被点击的元素，再向上查找是否属于某个卡片（比如判断是否匹配 .card 类）。
- 用
event.target.closest('.card')最简洁可靠，自动向上找最近的匹配祖先 - 若卡片内有按钮、图标等子元素，
closest()能正确归因到卡片本身 - 如果没匹配到，说明点到了空白区域或非卡片区域，直接
return
管理选中状态与数据
维护一个数组（如 selectedCards = []）记录已选卡片的唯一标识（推荐用 data-id 或 dataset.id），每次点击做增删判断。
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
立即学习“Java免费学习笔记（深入）”；
- 点击时先检查该卡片是否已在数组中：存在则移除，不存在则添加
- 同步更新 DOM 状态，比如给卡片添加
selectedclass 或修改 aria-selected - 可配合
Array.from(cardElement.classList).includes('selected')或直接读取 dataset
支持 Ctrl/Cmd 多选与连续选择
增强交互体验，允许按住 Ctrl（Windows/Linux）或 Cmd（Mac）点击多个不连续卡片，或按住 Shift 点击实现范围选择。
- 用
event.ctrlKey或event.metaKey判断是否按下了修饰键 - Shift 多选需记录上次点击的卡片索引，结合当前卡片在列表中的位置计算区间
- 注意：移动端无 Ctrl/Cmd，可考虑长按触发多选模式，或提供“编辑”入口进入批量操作态
不复杂但容易忽略细节，关键是统一状态管理 + 合理利用 DOM 结构和事件机制。
