label点击聚焦input是html规范定义的原生行为，无法全局禁用；正确做法是在图标等特定子元素上阻止默认行为或设pointer-events: none，而非禁用整个label。
label点击默认聚焦input是原生行为，无法全局禁用
浏览器对 label 的实现就是：只要它通过 for 属性或嵌套方式关联了可聚焦的 input，点击 label 任意非阻断区域，就会触发该 input.focus()。这不是 CSS 或属性开关能关掉的，它是 HTML 规范定义的语义行为。
所以“不让 input 获得焦点”的真实含义，其实是「在特定子区域（如图标、按钮）上阻止这个默认行为」，而不是废掉整个 label 的语义——否则可访问性会直接崩坏。
图标/按钮点击时阻止聚焦：只对目标元素调用 preventDefault()
常见错误是给整个 label 绑 click 并 e.preventDefault()，结果整个 label 都点不动了，键盘 Tab 也无法聚焦 input，读屏器也读不出关联关系。
- ✅ 正确做法：只在图标或按钮元素上监听
click，并在回调里调用e.preventDefault() - ✅ 同时确保该图标元素不包含
input，也不被label的for属性间接控制（即它本身不是可聚焦控件） - ⚠️ 注意：如果图标用了
<button type="button"></button>，它本身可聚焦，点击不会冒泡触发 label 聚焦——但此时要小心键盘导航逻辑是否混乱
示例：
<label for="search"> 搜索关键词 ⓘ <span class="info-icon">ⓘ</span> </label> <input type="text" id="search" name="q">
JS 只作用于图标：
document.querySelector('.info-icon').addEventListener('click', e => {
e.preventDefault(); // 关键：仅阻止这一点击的默认聚焦行为
showTooltip();
});
用 pointer-events: none 隔离图标区域（纯 CSS 方案）
如果图标纯属装饰、不需要任何交互（比如只是 SVG 图标），最轻量的做法是让浏览器完全忽略它的点击事件，这样 label 的原生聚焦行为自然不会被干扰。
- ✅ 给图标加
style="pointer-events: none"，或在 CSS 中写.info-icon { pointer-events: none; } - ⚠️ 注意：这会让图标无法响应 hover、click 等所有鼠标事件，所以仅适用于无交互需求的视觉元素
- ❌ 不要对整个
label设置pointer-events: none，否则 label 失效，input 就彻底点不进了
动态插入或 JS 移动过 DOM 后，label 关联可能已失效
label 和 input 的绑定依赖 DOM 结构稳定性。如果 JS 把 input 从原来位置移走、或重新渲染了整个表单片段，for 和 id 的字符串匹配虽然还在，但浏览器可能因节点重挂载而丢失内部关联缓存。
- ✅ 动态操作后，手动触发一次
input.focus()测试是否仍可聚焦，比单纯检查 HTML 更可靠 - ✅ 如果用框架（React/Vue），确保
id在组件 mount 后真实存在于 DOM 中，且未被 SSR/ hydration 错误覆盖 - ⚠️ 嵌套写法（
<label><input></label>）在这种场景下更鲁棒，因为绑定靠父子关系而非字符串查找
真正容易被忽略的是：问题常出现在「看起来没改代码，但 DOM 被第三方脚本或框架悄悄移动了节点」之后。这时候查 for 和 id 是否匹配，反而会浪费大量时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
