当标签中嵌入可交互图标时，点击图标会意外触发关联输入框的聚焦，本文提供纯 css + javascript 的解决方案，通过事件拦截与样式隔离，确保图标仅响应自身交互逻辑，不影响表单控件行为。

在 HTML 表单中， 语义化地将文本与表单控件绑定，点击整个 label 区域默认会聚焦对应 input——这是理想行为。但当 label 内部包含独立交互元素（如信息图标、按钮或开关）时，这种“全区域响应”反而成为干扰：用户点击图标本意是唤出提示弹窗，却同时激活了输入框，尤其在移动端（无 hover，依赖 tap），体验明显割裂。

解决核心在于事件捕获与行为解耦：保留 label 的整体可点击性，但对图标子元素的点击事件进行拦截，阻止其冒泡至 label 或触发默认聚焦行为。

✅ 推荐实现方案如下：

1. 结构优化（语义清晰 + 样式可控）
为图标添加明确类名（如 .info-icon），并将弹窗作为 label 的同级或内部兄弟元素（便于 CSS 定位与 JS 控制）：

  I am a label! ⓘ

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';
  }
});

⚠️ 注意事项：

• 不要将 放在 内部并使用 for 属性混用（易引发嵌套事件冲突）；推荐显式 for/id 绑定；
• event.preventDefault() 在 label 子元素上生效的前提是：该元素本身不具有原生表单提交或跳转行为（如 需额外处理）；
• 若图标需支持键盘访问（无障碍），请添加 tabindex="0" 并监听 Enter/Space 键事件；
• 弹窗定位建议结合 getBoundingClientRect() 动态计算，避免绝对定位偏移问题。

此方案兼顾语义化、可访问性与跨端一致性，既保留 label 的便捷聚焦能力，又赋予图标完全独立的交互主权。