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

Question

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

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

复选框的可视化表示告诉我它没有被选中。 所以我假设检查状态将返回false。 我相信这肯定是愚蠢的，我绝对会误解这里的事情。 有趣的是，我也在记录事件本身。 在目标属性内部，checked属性设置为false，就像我预期的那样。

根据我的理解，防止默认将取消事件而不停止传播，那么到底发生了什么？

如果有人可以在这一点上启发我会很棒。 这是一个例子。

 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”的type属性的input元素上的click事件期间，某些实现可能会在文档中调度事件之前更改此属性的值。 如果取消事件的默认操作，则可以将属性的值更改回其原始值。 这意味着在处理单击事件期间此属性的值取决于实现。

但是当我删除了preventDefault语句时，IE / Edge中的结果与其他浏览器一致，这让我感到困惑。

所以我不认为这是IE / Edge的预期行为...因此我在Microsoft Connect上提交了一个错误 。

---

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

根据HTML规范 ， input[type=checkbox]元素的检查性在取消的激活过程中恢复，该过程在事件处理程序之后根据激活部分进行。 因此，在执行事件处理程序期间，元素的检查性尚未恢复。

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

Answer 2

根据w3schools的说法“preventDefault（）方法取消了该事件，如果它是可取消的，这意味着不会发生属于该事件的默认操作。” click事件是可取消的（你可以像这个console.log一样检查它（“cancelable？”+ evt.cancelable）;.从我的理解，复选框对象的click事件的默认行为是读取当前的状态一个复选框，在true和false之间交替，从而将其状态更改为checked和unchecked。简言之，默认行为是切换;因此，preventDefault（）取消该行为。

关于复选框checked = true; unchecked = false 。如果你尝试调试并逐步跟踪eventListener，你会看到一旦你进入它，未经检查的框即使在踩到evt.preventDefault（）后也会被“检查”，所以当你调用console.log时（this.checked） ，evt.target.checked）; 那时，对于编译器，你的盒子被“选中”， 只有当eventListener完成执行时 ， 复选框才会回到“未选中”状态。 由此可以得出结论，在复选框的情况下，在执行事件侦听器中的所有调用之后，最终实际激活（执行）preventDefault（） 。