单选按钮点击事件触发callback两次，是什么原因导致的？

问题原因 #

你遇到的回调触发两次的问题是由HTMLlabel元素的默认行为和事件冒泡共同导致的，具体逻辑如下：

• 当你点击单选按钮（包括<label>区域和内部的<input>区域）时，首先会触发一次点击事件冒泡到<label>元素，第一次执行你绑定的onClick回调，调用props.select
• 你在<label>的onClick中只执行了event.stopPropagation()（该方法仅能阻止事件继续向上层元素冒泡），但没有阻止<label>的默认行为：和<input>关联的<label>在收到点击事件后，会自动触发关联<input>的二次点击事件，这个事件会再次冒泡到<label>，导致onClick回调第二次执行

修复方案 #

你可以任选以下一种方案修复：

1. 在<label>的onClick回调中补充event.preventDefault()，阻止<label>触发<input>二次点击的默认行为，修改后代码如下：

<.label(
        ....styling
        ^.onClick ==> { event =>
          event.stopPropagation()
          event.preventDefault() // 新增此行即可
          props.select
        },
        <.input.radio(
          ....styling
          ^.onChange ==> { event =>
            event.preventDefault()
            Callback.empty
          },
          ^.checked := props.isActive,
          ^.disabled := props.disabled
        )
      )

2. 将onClick回调从<label>移到内部的<input.radio>上绑定，从根源上避免<label>默认行为的影响
3. 也可以在回调中添加事件源判断，仅当事件触发源是<label>本身时才执行props.select，过滤掉<input>冒泡上来的事件

内容的提问来源于stack exchange，提问作者Mandroid