radio触发两次及取消选中

radio click 事件会触发两次

<label class="item">
          <input type="radio" name="music" />
          <span>All Falls Down</span>
</label>

如果监听label的click事件,会触发两次, 这不是捕获冒泡的问题,而是关联控件

解决办法

1. 改为监听input[type=radio]
2. 条件刷选

 if (e.target === radio) {
            // intpu[type=radio] 触发的事件
          } else {
            // label触发的事件
}

label的默认点击行为

点击label的默认行为是: 点击label => 点击input[type=radio] => 执行勾选
label阻止默认行为将导致,radio不能勾选

radio 取消选中

如果直接取消, 默认行为导致radio又勾选上了

  if (radio.checked) {
              // 自己手动执行了勾选,所以不能让默认行为再去触发radio执行勾选
                e.preventDefault();
              radio.checked = false;
            }

See the Pen 解决radio触发两次及取消选中 by ShawSpring ( @shawspring) on CodePen.