是规范行为，W3C规定label嵌套input时click会触发两次：一次label冒泡，一次浏览器自动激活input并冒泡，旨在保障可访问性。
label嵌套input时click事件触发两次是规范行为，不是bug
浏览器点击 label 包裹的 input 时，click 事件确实会触发两次：一次来自 label 自身冒泡，另一次是浏览器自动触发关联 input 的 click（并再次向上冒泡）。这是 W3C 明确规定的语义激活机制，目的是保证可访问性（如屏幕阅读器、键盘聚焦等场景下能正确激活控件）。
常见错误现象包括：
- 复选框状态翻转两次（勾上又取消）
- React/Vue 中
useState或ref被意外更新两次 - 控制台重复打印、计数器加了两次、弹窗打开又立刻关闭
别急着加 event.preventDefault() 或 return false——它们会同时禁用默认激活行为，破坏表单控件的原生功能和可访问性。
最稳妥的解法：改用 for/id 平级结构
把 input 和 label 拆成兄弟节点，用 for 属性绑定，从根源上切断嵌套带来的双重冒泡链。
立即学习“前端免费学习笔记（深入）”；
这样写：
<input type="checkbox" id="agree" name="agree"> <label for="agree">我已阅读并同意用户协议</label>
而不是这样：
<label><input type="checkbox" name="agree">我已阅读并同意用户协议</label>
优势很明显：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 语义清晰，无障碍支持完整（
for关联可被所有辅助技术识别） - 事件只走一次：点击文字 → 触发
input.click()→ 仅冒泡一次 - 无需 JS 干预，零兼容性风险，连 IE9 都没问题
必须嵌套时：在 input 上阻止冒泡，不是在 label 上
如果因 CSS 布局、组件封装等原因不得不嵌套（比如某些 UI 库或 legacy 代码），唯一安全的拦截点是 input 元素本身。
正确做法是在 input 上加 onclick="event.stopPropagation();"：
<label> <input type="checkbox" onclick="event.stopPropagation();"> 我已阅读并同意用户协议 </label>
注意几个关键点：
- 写在
input上才有效；写在label上毫无意义，因为第一次冒泡已经发生 - 不能用
return false，它会取消勾选动作，导致 checkbox 失效 - 若用 JS 绑定，也要确保监听的是
input，而非外层label或父容器
监听父容器时如何过滤掉重复触发
当 click 事件绑在 label 和 input 的共同祖先上（比如一个 div.card），且无法修改 DOM 结构时，只能靠判断事件源来过滤。
核心逻辑是：只处理来自 label 的点击，忽略由 input 自动触发的那一次。但要注意——不能简单写 if (e.target.tagName === 'LABEL')，因为 e.target 可能是 label 内的文字节点（#text）或 span。
推荐写法：
container.addEventListener('click', function(e) {
const label = e.target.closest('label');
if (!label || label.contains(e.target) === false) return;
// 确保点击的是 label 本身，且不是其内部 input 触发的二次事件
if (e.target === label || (e.target === label.firstElementChild && label.firstElementChild?.tagName === 'INPUT')) {
// 这里仍可能进两次：一次点文字，一次点 input 后冒泡上来
// 所以更稳的方式是：只响应非 input 子元素的点击
if (e.target !== label.firstElementChild) {
handleLabelClick();
}
}
});
真正容易被忽略的点是：很多开发者以为“只要阻止了 input 的冒泡就万事大吉”，却忘了 label 本身的 click 事件依然存在——双重触发的本质是两个独立事件流，不是单一流程里的重复执行。不区分源头，光靠 stopPropagation 很难彻底干净地解决。
