点击label包裹radio时触发两次是标准行为：一次为label自身click，一次为浏览器转发至input后冒泡回label；本质是事件路径叠加而非bug，可通过e.target判断或改用for/id显式关联解决。

Label 包裹 radio 时点击触发两次，本质是事件冒泡与浏览器原生行为叠加导致的——不是 bug，而是标准行为被误用后的副作用。

为什么点击一次会执行两次？

当你写成 <label><input type="radio">选项</label>，点击文字区域时： • 第一次触发：label 元素自身的 click 事件（你绑定的监听器）； • 第二次触发：浏览器自动将 label 点击“转发”给内部 input，触发 input 的 click，而该事件会向上冒泡，再次抵达同一 label 的监听器。

这并非重复注册，而是同一点击动作经由两个路径到达同一个监听函数：一次来自 label，一次来自 input 冒泡上来。

如何准确识别并拦截多余触发

• 检查 event.target：在 handler 中判断 e.target.tagName === 'INPUT'，是 input 就直接 return
• 避免在 label 上绑 click：改用 for 属性解耦，把事件逻辑移到 input 的 change 事件里更语义化
• 不依赖 preventDefault()：它只阻止默认行为（如跳转），对冒泡无效；真正需要的是 e.stopPropagation() 或源头过滤

移动端还有额外干扰

iOS Safari 对嵌套复杂的 label（比如含 div、span、图标等）识别触摸目标不准，常导致首次点击无响应，第二次才生效。这不是冒泡问题，而是触摸事件未正确映射到 radio。解决方式不是压制事件，而是主动接管：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

• 给外层容器（如 .container）加 click 监听
• 在回调中手动设 radio.checked = true
• 确保 radio 有唯一 id，且 label 的 for 值严格匹配

最稳妥的结构写法

放弃 label 包裹 input 的写法，改用显式关联：

选项 A

这样 label 和 input 是同级元素，点击 label 不会触发 input 的 click 再冒泡回来，事件流清晰，change 也能稳定响应。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南