为什么复选框单击事件上的 preventDefault 为选中的属性返回 true？

Question

我只是好奇，需要对以下情况进行一些解释。

假设我有一个复选框类型的输入元素，并附加了一个事件监听器，用于监听点击事件。我阻止复选框的默认行为并记录复选框的选中状态，该状态将始终返回 true。

复选框的视觉表示告诉我它没有被选中。所以我会假设检查状态会返回假。我确信这一定是愚蠢的，我在这里肯定误解了一些东西。有趣的是，我也在记录事件本身。在目标属性内部，checked 属性设置为 false，正如我所预料的那样。

据我了解，prevent default 会在不停止传播的情况下取消事件，那么这里到底发生了什么？

如果有人能在这方面启发我，那就太好了。这是一个例子。

var checkbox = document.getElementsByTagName('input')[0],
    output = document.getElementById('output');

checkbox.addEventListener('click', function(evt) {
  evt.preventDefault();
  output.innerHTML = "Checkbox checked attribute is " + this.checked;
  console.log(this.checked, evt.target.checked);
  console.log(evt);
}, false);

<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox with preventDefault().</label>
<div id="output"></div>

Answer 1

实际上，click 处理程序中的checked 值的结果是依赖于实现。

正如我在几个浏览器中测试的那样，Chrome/Firefox/Safari/Opera 在这种情况下总是会返回 true，但是如果你一直点击该复选框元素，IE/Edge 的行为会有点奇怪。

我在规范中找到了这一段，这可能是对这种不一致的解释：

注意：在处理类型属性值为“radio”或“checkbox”的输入元素上的点击事件期间，某些实现可能会在事件正在文档中发送。如果事件的默认动作被取消，则属性的值可能会被更改回其原始值。这意味着在处理点击事件期间该属性的值取决于实现。

但是当我去掉preventDefault语句后，在IE/Edge中的结果与其他浏览器一致，让我很困惑。

所以我认为这不是 IE/Edge 的预期行为……因此我提交了a bug on Microsoft Connect。

---

毕竟，如果我们假设 Chrome 的行为符合标准，那么以下可能是一个合适的解释：

根据HTML Spec，input[type=checkbox] 元素的检查性在取消激活过程中恢复，该过程在根据Activation 部分的事件处理程序之后。所以在事件处理程序的执行过程中，元素的检查状态还没有恢复。

（规范没有明确声明取消激活步骤必须在所有事件处理程序之后进行；但很容易推断，否则无法确定事件的取消状态）

Answer 2

根据 w3schools 的“preventDefault() 方法取消事件，如果它是可取消的，这意味着属于该事件的默认操作不会发生。”点击事件是可取消的（您可以像这样检查它console.log("cancelable?"+ evt.cancelable);。 因此，据我了解，复选框对象的单击事件的默认行为是读取复选框的当前状态并在真假之间交替，从而将其状态更改为选中和未选中。简而言之，默认行为是切换；因此， preventDefault() 会取消该行为。

关于复选框checked = true; unchecked = false。如果您尝试逐步调试并遵循 eventListener，您将看到，一旦您进入它即使在踩到 evt.preventDefault() 因此，当您调用 console.log(this.checked, evt.target.checked); 时，编译器您的框已被“选中”，只有在 eventListener 完成执行时，复选框才会返回“未选中”状态。 由此我可以得出结论，如果复选框 preventDefault() 在所有调用之后实际上最后被激活（执行）事件监听器被执行。