当标签中嵌入可交互图标时，点击图标会意外触发关联输入框的聚焦，本文提供纯 css + javascript 的解决方案，通过事件拦截与样式隔离，确保图标仅响应自身交互逻辑，不影响表单控件行为。
在 HTML 表单中，
解决核心在于事件捕获与行为解耦：保留 label 的整体可点击性，但对图标子元素的点击事件进行拦截，阻止其冒泡至 label 或触发默认聚焦行为。
✅ 推荐实现方案如下：
1. 结构优化（语义清晰 + 样式可控）
为图标添加明确类名（如 .info-icon），并将弹窗作为 label 的同级或内部兄弟元素（便于 CSS 定位与 JS 控制）：
POP UP
2. CSS 增强（兼顾 hover 与移动端）
利用 :hover 实现桌面端悬浮显示，同时为移动端预留显式控制入口：
.info-icon {
display: inline-block;
cursor: pointer;
margin-left: 4px;
border: 1px solid #999;
border-radius: 50%;
width: 18px;
height: 18px;
text-align: center;
line-height: 16px;
font-size: 12px;
}
.tooltip-popup {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
padding: 8px 12px;
background: #333;
color: white;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
display: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* 桌面端：悬停显示 */
.info-icon:hover + .tooltip-popup {
display: block;
}
/* 移动端兼容：需 JS 显式控制显示/隐藏 */
@media (hover: none) and (pointer: coarse) {
.tooltip-popup {
display: none !important; /* 禁用 hover 规则，交由 JS 管理 */
}
}3. JavaScript 精准拦截（关键步骤）
监听图标点击事件，调用 event.preventDefault() 阻止 label 默认聚焦行为，并手动切换弹窗状态：
const infoIcon = document.querySelector('.info-icon');
const popup = document.querySelector('.tooltip-popup');
infoIcon.addEventListener('click', function(event) {
event.preventDefault(); // ✅ 关键：阻止 label 的默认聚焦行为
event.stopPropagation(); // 可选：防止事件冒泡到 label
// 切换弹窗可见性
const isHidden = popup.style.display === 'none' || popup.style.display === '';
popup.style.display = isHidden ? 'block' : 'none';
});
// 【增强建议】点击外部区域自动关闭弹窗
document.addEventListener('click', function(event) {
if (!infoIcon.contains(event.target) && !popup.contains(event.target)) {
popup.style.display = 'none';
}
});⚠️ 注意事项：
- 不要将 放在
- event.preventDefault() 在 label 子元素上生效的前提是：该元素本身不具有原生表单提交或跳转行为（如 需额外处理）；
- 若图标需支持键盘访问（无障碍），请添加 tabindex="0" 并监听 Enter/Space 键事件；
- 弹窗定位建议结合 getBoundingClientRect() 动态计算，避免绝对定位偏移问题。
此方案兼顾语义化、可访问性与跨端一致性，既保留 label 的便捷聚焦能力，又赋予图标完全独立的交互主权。
