label 包裹 input 时点击触发两次 click 是 w3c 规范行为：先触发 label 的 click，再自动调用 input.click() 触发第二次；解法首选平级结构 + for/id 关联，必须嵌套时在 input 上用 stoppropagation 阻止冒泡。
label 点击触发两次 click 是浏览器规范行为，不是 bug，但必须干预，否则会翻转复选框、重复提交、破坏 React/Vue 的 state 更新逻辑。
为什么 label + input 嵌套时 click 会触发两次
根本原因是 W3C 明确规定的语义激活机制：当 label 包裹 input 时，点击 label 文字，浏览器会做两件事——
- 正常冒泡触发
label上的 click（第一次） - 自动调用关联
input的.click()方法，该方法又会触发input的 click 事件并向上冒泡（第二次）
这在控制台打印 event.target.nodeName 就能验证：一次是 LABEL，一次是 INPUT。React 中常见表现是 setState 被调用两次，checkbox 状态闪退又恢复。
最稳妥的 HTML 结构解法：label 和 input 平级 + for 关联
不改 JS、不加判断、兼容所有框架，直接从语义结构上切断双重触发链：
<input id="agree" type="checkbox"><label for="agree">我已阅读并同意用户协议</label>
关键点：
-
for属性值必须与input的id完全一致（大小写敏感） - 两者必须在同一个 DOM 树层级下（不能一个在 Shadow DOM 里，一个在主文档）
- 此写法仍保持无障碍访问（screen reader 可正确朗读 label 文本）
必须嵌套时的 JS 干预方案
如果因样式或历史原因必须嵌套（比如 <label><input>xxx</label>），优先在 input 上阻止冒泡：
<label> <input type="checkbox" onclick="event.stopPropagation()"> 同意条款 </label>
注意：
- 必须写在
input上，写在label上无效（第一次冒泡已发生） - 不要用
return false——它会同时取消默认行为（如 checkbox 勾选），破坏可访问性 - 若监听的是父容器 click（如
div#form），可用if (e.target.tagName === 'INPUT')过滤，但需注意 IE 兼容性（e.target在旧版 IE 需 fallback 到e.srcElement）
容易被忽略的键盘交互副作用
即使解决了鼠标点击问题，别忘了空格键：当 label 获得焦点（Tab 导航到它），按空格也会触发关联 input 的 click。这不是 bug，是浏览器对表单控件的原生支持。如果你隐藏了 input（如 opacity: 0 或 position: absolute），这个空格行为可能造成意外状态切换。此时要么放弃 label 语义改用 div + 手动 click 绑定，要么在 input 上监听 keydown 并 preventDefault() 拦截空格（仅限明确不需要键盘操作的场景）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
