javascript - 无法使用 preventDefault() 以编程方式检查单选按钮

Question

我有一些元素(例如带有 .label 类的 div)，每个元素中都有单选按钮。当用户单击此“标签”时，我以编程方式将其中的 radio 设置为选中状态。但是，如果我将 preventDefault() 用于点击事件，如果用户准确地点击了 radio ，则 radio 没有被选中。

请帮助我理解这种奇怪的行为。 我知道解决方案，我知道为什么父元素上的 preventDefault() 不允许检查 radio ，但我想了解，为什么 radio 上的点击事件不允许以编程方式设置其状态。您会看到单击单选按钮会说已选中单选按钮，但实际上并未选中。

$(function () {
  $('.label').on('click', function(e) {
    var $radio = $(this).find(':radio')
    
    console.log('before prevent', `checked=${$radio.prop('checked')}`, `prevented=${e.isDefaultPrevented()}`);
    
    e.preventDefault();
    if (!$(this).hasClass('checked')) {
      $('.checked').removeClass('checked');
      $(this).addClass('checked');
    }
    $radio.prop('checked', true);
    
    console.log('after prevent', `checked=${$radio.prop('checked')}`, `prevented=${e.isDefaultPrevented()}`);
    
    setTimeout(function () {
      console.log('after timeout', `checked=${$radio.prop('checked')}`);
    }, 500);
  });
  $(':radio').on('click', function (e) {
    console.log('click', `prevented=${e.isDefaultPrevented()}`);
  });
});

.label {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #000;
}
.label.checked {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="label">
  Label 1 <input type="radio" name="radio" value="1">
</div>
<div class="label">
  Label 2 <input type="radio" name="radio" value="2">
</div>

更新。我怎么看这种情况:

1. 用户点击 radio
2. 首先在 radio 上触发事件并将输入设置为已选中。
3. 然后事件冒泡并在 .label 上触发
4. 调用 preventDefault() 会设置一个内部 cancelled 标志。
5. div 获取类“.checked”并将 radio 再次设置为已选中，现在以编程方式进行。
6. 事件冒泡，但什么也没有发生。
7. 由于事件已取消，默认操作不应发生，复选框将重置为之前的状态。

我说得对吗？

Answer 1

我如何看待这种情况(受 https://stackoverflow.com/a/15767580/11357125 启发):

1. 你点击 radio
2. 它被检查
3. 事件在文档根上调度​​
4. 捕获阶段，你的处理程序没有任何反应
5. 事件到达 <input>
6. ……开始冒泡
7. 在 <div> 上，它被处理了。事件监听器调用 preventDefault方法，设置内部 cancelled旗帜。 <div>获取类“.checked”并将 radio 设置为再次检查，现在以编程方式。
8. 事件冒泡，但什么也没有发生。
9. 由于事件已取消，因此不应发生默认操作，并且复选框会重置为之前的状态即使在以编程方式选中之后也是如此。