如何在标签内禁用图标点击时的输入聚焦行为

当标签中包含交互式图标（如信息提示）时，点击图标会意外触发关联输入框的聚焦。本文介绍通过 javascript 阻止事件冒泡并调用 `event.preventdefault()`，精准隔离图标点击行为，确保桌面端 hover 和移动端 tap 均能独立控制弹窗，而不干扰表单焦点逻辑。

在语义化 HTML 中， 与对应 的绑定关系非常强大：整个 label 元素（包括其所有子节点）默认都具备点击聚焦输入框的能力。这虽提升了可访问性，但当 label 内嵌需独立交互的元素（如图标、按钮、开关）时，就会产生冲突——尤其在移动端，tap 操作既会触发弹窗，又会激活输入框，造成不良用户体验。

解决的核心思路是：阻止图标区域的默认 label 行为，同时保留 label 其他部分的聚焦能力。不能简单移除 for 属性或解耦 DOM 结构（否则破坏语义和可访问性），而应采用事件拦截策略。

✅ 正确做法是为图标添加专属事件监听器，并在其中调用 event.preventDefault()：

  I am a label! 
  ℹ️
  Help text here

.info-icon {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  user-select: none;
}

.tooltip-popup {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 8px 12px;
  background: #333;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  z-index: 1000;
}

/* 桌面端：hover 显示 */
.info-icon:hover + .tooltip-popup {
  display: block;
}

/* 移动端兼容：确保 tap 区域足够大 */
@media (pointer: coarse) {
  .info-icon {
    padding: 6px;
  }
}

const icon = document.querySelector('.info-icon');
const popup = document.querySelector('.tooltip-popup');

icon.addEventListener('click', (e) => {
  e.preventDefault(); // ✅ 关键：阻止 label 默认聚焦行为
  popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
});

// 可选：点击外部关闭弹窗
document.addEventListener('click', (e) => {
  if (!icon.contains(e.target) && !popup.contains(e.target)) {
    popup.style.display = 'none';
  }
});

⚠️ 注意事项：

• 不要使用 stopPropagation() 替代 preventDefault()：stopPropagation() 会阻止事件冒泡，可能影响外层监听器；而 preventDefault() 精准抑制 label 的默认聚焦动作，更安全、语义更清晰。
• 保持可访问性：图标仍需 role="button" 和 aria-label（例如 ℹ️），以支持键盘操作（Enter/Space 触发）。
• 避免重复绑定：确保脚本在 DOM 加载完成后执行（如包裹在 DOMContentLoaded 或将 script 放在 body 底部）。

通过这一方案，你既保留了 label 的语义完整性与无障碍支持，又实现了图标交互的完全解耦——桌面端悬停显示、移动端点击展开，互不干扰，真正兼顾体验与标准。