label 默认行为不可阻止，需精准拦截子元素事件：图标点击防聚焦用 e.preventdefault() 绑定图标；嵌套 checkbox 双触发应改用 for 关联；file input 需手动调用 click() 且须用户手势触发。
label 的默认行为不是“能被阻止”的东西，而是浏览器根据 HTML 语义自动触发的焦点/激活逻辑。你真正要控制的，是**点击图标等子元素时不要连带聚焦 input**，或**避免 label 和内部 input 双重触发 click**——这两类问题常被误认为“要阻止 label 默认行为”。
点击 label 内图标时意外聚焦 input
这是最典型的误用场景：label 包含一个 <span class="icon">ⓘ</span>，用户点它本意是弹窗，结果 input 突然获得焦点、键盘弹出。
- 根本原因：图标在
label内，而 label 的默认行为会把整个区域映射为 input 的热区，点击任何子节点都会触发 focus - 正确解法不是禁用 label，而是对图标单独拦截：
e.preventDefault()必须绑定在图标元素上，且只在此处调用 - 结构建议保持嵌套（利于无障碍），但 JS 监听对象必须精准到图标：
document.querySelector('.icon').addEventListener('click', e => { e.preventDefault(); showHelp(); }) - 别在 label 上监听并
stopPropagation()——这会废掉整个 label 的可访问性
label 嵌套 input 导致 click 触发两次
比如 <label><input type="checkbox">同意条款</label>，点击文字时控制台打印两次，复选框状态翻转异常。
- 这不是 bug，是 W3C 明确规定的语义激活机制：点击 label → 浏览器自动调用 input.click() → 后者再冒泡一次
- 最稳妥方案是改结构：让
label和input平级，用for关联，彻底避开嵌套热区映射 - 若必须嵌套，
stopPropagation()要写在input的事件监听里（不是 label），否则第一次冒泡已发生，拦不住 - 绝对不要在 label 上写
onclick="return false"——它会同时取消 checkbox 的勾选，破坏可访问性
label 关联 file input 后不想自动触发选择对话框
常见于自定义上传按钮：<label><i>?</i>上传<input type="file" style="display:none"></label>，但有时需要先校验权限再决定是否打开文件选择器。
- 无法“阻止 label 的默认行为”，因为这个行为是原生、不可覆盖的；你能做的只有提前干预
- 方案一：把
input[type="file"]移出 label，用 JS 手动调用input.click()（需确保 input 已渲染且未被 disabled） - 方案二：label 保留，但给图标加
pointer-events: none，再用 JS 绑定图标 click 并手动控制 —— 注意移动端需额外处理touchstart - 关键限制：浏览器不允许 JS 静默调起文件选择器，
input.click()必须由用户手势（click/tap）直接触发，不能包在setTimeout或异步回调里
最容易被忽略的一点：所有这些操作都依赖 DOM 结构和事件绑定时机。如果 label 是动态插入的，监听器必须用事件委托或确保挂载在 DOMContentLoaded 之后；否则 preventDefault() 或 stopPropagation() 根本没机会执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
