复选框联动应优先使用 change 事件而非 click，因其不冒泡且仅在状态真正改变时触发；需精准判断事件目标、合理分组管理、必要时才阻止冒泡。
复选框勾选联动时，事件冒泡容易导致意外触发父级监听器（比如点击整个卡片区域时也触发了 checkbox 的 change 事件），或在委托场景下多次响应。关键不是“阻止冒泡”，而是**精准控制事件响应时机和目标**。
用 change 事件代替 click，避开冒泡干扰
复选框的 change 事件只在用户真正改变勾选状态后触发，且不会冒泡到非表单容器（如 div、li）——它天然比 click 更可靠。即使父元素监听了 click，也不会因 checkbox 的 change 被连带触发。
- ✅ 推荐写法：
checkbox.addEventListener('change', handler) - ❌ 避免写法：
checkbox.addEventListener('click', handler)（易与父级 click 冲突） - 如果必须用事件委托，监听父容器的 change 事件（注意：只有表单元素的 change 会冒泡，且现代浏览器支持良好）
联动逻辑中区分事件源，避免重复执行
多个复选框联动（如“全选/反选”+子项）时，常因冒泡或重复绑定导致函数被调两次。可在 handler 中检查 e.target 是否为当前操作的 checkbox：
- 判断
e.target === checkboxEl或用e.target.matches('[type="checkbox"]') - 对“全选框”和“子项框”使用不同逻辑分支，避免子项 change 触发全选框同步又反过来触发子项
- 示例：全选框 change 后，用
checked值批量设置子项.checked，但不触发子项的 change 事件（不调dispatchEvent）
需要阻止冒泡时，只在必要位置调用 stopPropagation
仅当父容器有 click 监听器且你明确不想让它响应 checkbox 区域点击时才阻止——这不是默认动作。
- 在 checkbox 的 click 处理函数中调用
e.stopPropagation()（change 不需要） - 更稳妥的做法：给 checkbox 的 label 或外层包装加
pointer-events: none，或把父级 click 绑定在非 checkbox 子元素上 - ⚠️ 切勿在 change 里 stopPropagation —— 它不影响父级 click，且可能破坏表单验证等依赖冒泡的逻辑
用 dataset 或 name 分组管理联动关系
避免硬编码 DOM 结构依赖，用语义化属性解耦：
- 给一组关联复选框统一设
data-group="user-permissions" - 全选框加
data-role="master"，子项加data-role="slave" - 事件委托监听父容器时，用
e.target.dataset.role === 'slave'精准过滤，不依赖层级或 class 名
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
