在表单中，当 `
要实现“点击/触摸图标时不聚焦输入框，但点击标签其余区域仍正常聚焦”，核心思路是：阻止图标区域事件冒泡至 <label> 的默认行为，同时保持语义结构完整与无障碍支持。
✅ 推荐方案：事件拦截 + 语义化结构优化
使用 event.preventDefault() 在图标点击时阻止 <label> 的默认聚焦行为，同时确保图标本身不携带 for 关联逻辑（即不参与 label-input 绑定）：
<label for="myInput"> I am a label! <span class="info-icon" role="button" tabindex="0" aria-label="Show help information">ⓘ</span> </label> <div id="popup" class="popup">POP UP</div> <input id="myInput" />
.info-icon {
border: 1px solid red;
display: inline-block;
cursor: pointer;
user-select: none;
}
.popup {
position: absolute;
display: none;
width: 50px;
height: 50px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 1000;
}
/* 桌面端：hover 触发（不影响移动端） */
.info-icon:hover + .popup {
display: block;
}
/* 移动端 & 键盘用户：显式控制显示 */
.popup.show {
display: block;
}const infoIcon = document.querySelector('.info-icon');
const popup = document.querySelector('.popup');
infoIcon.addEventListener('click', (e) => {
e.preventDefault(); // 阻止 label 默认聚焦行为
popup.classList.toggle('show');
});
// 支持键盘操作（Enter/Space）
infoIcon.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
popup.classList.toggle('show');
}
});
// 点击外部关闭弹窗（可选增强体验）
document.addEventListener('click', (e) => {
if (popup.classList.contains('show') &&
!e.target.closest('.info-icon') &&
!e.target.closest('.popup')) {
popup.classList.remove('show');
}
});⚠️ 注意事项
- 不要移除 for 属性或拆分 <label> 结构：否则将破坏屏幕阅读器对表单控件的语义识别，降低可访问性（a11y）。
- 图标需添加 role="button" 和 tabindex="0"：确保键盘用户可通过 Tab 导航并用 Enter/Space 触发，符合 WCAG 标准。
- 避免仅依赖 :hover 实现核心功能：移动设备无 hover，所有关键交互必须有 click/touch 或 keyboard fallback。
- 慎用 pointer-events: none：它会完全禁用图标交互，且无法支持键盘操作，不符合可访问性要求。
✅ 总结
该方案在不牺牲可访问性、不破坏 HTML 语义的前提下，精准隔离图标区域的事件行为：桌面端保留 hover 提示，移动端和键盘用户通过显式点击/按键触发弹窗，同时彻底避免误聚焦输入框。这是兼顾用户体验、技术健壮性与无障碍合规的最佳实践。
