根源是label点击触发input click且事件冒泡导致两次触发；解法首选绑定click到input上，Vue中应@click写在input而非label上，必须绑label时需用event.target判断来源。
label 包裹 input 时 click 事件触发两次的根源
根本原因是浏览器对 label 的原生行为：点击 label 会自动触发其内部或关联的 input 的 click，而该 input 的 click 又会冒泡回 label（如果事件绑在 label 上）。结果就是一次物理点击，产生两个独立的 click 事件对象——event.target 分别是 INPUT 和 LABEL。
把 click 事件绑定到 input 上最直接有效
这是绝大多数场景下的首选解法，既符合语义，又规避了双重触发。不需要改 HTML 结构，只需调整事件监听目标：
- 原来写：
$('label').on('click', handler)→ 点击 label 触发两次 - 改成：
$('label input').on('click', handler)→ 点击 label 或 input 都只触发一次 - Vue 中同理：
<input @click="handle" />，而不是<label @click="handle"><input></label> - 注意：如果用了
v-model，确保事件处理逻辑不与响应式更新冲突（比如重复 toggle）
必须绑在 label 上时怎么过滤掉冗余触发
某些 UI 组件或遗留代码无法轻易改绑定目标，这时需在 handler 内判断事件来源：
- 用
event.target.tagName === 'INPUT'拦截第一次（来自 input 自身）或第二次（来自 label 冒泡），只执行一次逻辑 - 更稳妥写法：
if (event.target === event.currentTarget) { /* 只处理 label 自身点击 */ }，但要注意这会忽略 input 的直接点击 - 时间戳防抖（如
if (Date.now() - lastClick ）属于兜底方案，不推荐作为主逻辑，容易掩盖真实问题 - 千万别用
e.preventDefault()在 label 上——它会阻止原生 focus/选中行为，checkbox/radio 就失效了
移动端和样式影响下容易被忽略的细节
即使事件逻辑修好了，视觉和交互体验仍可能出问题：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 默认 checkbox 尺寸极小（约 12px），仅靠
label文本区域扩展点击区，手指误触率高；需配合min-height、padding或伪元素撑开可触区域 -
label内嵌button、a或其他可交互元素时，点击它们会中断原生 label 关联逻辑，checkbox/radio 不响应；这类结构必须拆开，用 JS 显式控制状态 - 多个 radio 共享 name 但 id/for 不唯一，会导致点击任意 label 都只影响第一个 input——检查
id和for值是否严格一一对应、大小写敏感
