为什么对复选框单击事件的preventDefault对checked属性返回true？ [英] Why does preventDefault on checkbox click event returns true for the checked attribute?

问题描述

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

I am just curious and need some explanation on the following situation.

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

Let's say i have an input element of type checkbox with an eventlistener attached to it, listening for the click event. I prevent the default behavior of the checkbox and log the checked state of the checkbox, which will always return true.

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

The visual representation of the checkbox is telling me that it is not checked. So i would assume that the checked state would return false. I am sure this must be something silly and i am definitively misunderstanding something here. The funny thing is, i am logging the event itself as well. Inside of the target property the checked property is set to false, just as i would have expected.

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

From my understanding, prevent default will cancel the event without stopping propagation, so what exactly is happening here?

如果有人能在这个问题上给我启发，那就太好了。以下是示例。

It would be great if someone could enlighten me on this one. Here is the example.

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>

推荐答案

实际上，点击处理程序中的已检查值的结果是依赖于实现。

Actually, the result of the checked value in a click handler is implementation dependent.

正如我测试的那样在多个浏览器中，Chrome / Firefox / Safari / Opera在这种情况下将始终返回true，但如果您继续单击该复选框元素，则IE / Edge的行为会有点奇怪。

As I tested in several browsers, Chrome/Firefox/Safari/Opera will always return true in this case, but IE/Edge's behavior gets a bit weird if you keep clicking on that checkbox element.

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

And I found this paragraph in the spec, which might be a explanation of this inconsistency:

注意 ：在处理具有值radio或checkbox的type属性的input元素上的click事件期间，某些实现可能会在文档中调度事件之前更改此属性的值。如果取消事件的默认操作，则可以将属性的值更改回其原始值。这意味着在处理点击事件期间此属性的值取决于实现。

Note: During the handling of a click event on an input element with a type attribute that has the value "radio" or "checkbox", some implementations may change the value of this property before the event is being dispatched in the document. If the default action of the event is canceled, the value of the property may be changed back to its original value. This means that the value of this property during the handling of click events is implementation dependent.

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

But when I removed the preventDefault statement, the results in IE/Edge are consistent with the other browsers, which confuses me.

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

So I don't think it is IE/Edge's intended behavior… Therefore I filed a bug on Microsoft Connect.

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

After all, if we presume Chrome's behavior to be standard-compliant, then the following might be a suitable explanation:

根据 HTML Spec ，输入[type = checkbox] 元素的检查性在c处恢复根据激活部分的事件处理程序之后的激活激活过程。因此，在执行事件处理程序期间，元素的检查性尚未恢复。

According to the HTML Spec, an input[type=checkbox] element's checkedness is restored at the canceled activation process, which comes after the event handlers according to the Activation section. So during the execution of event handlers, the element's checkedness hasn't been restored yet.

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

(The spec doesn't explicitly state that canceled activation steps must come after all the event handlers; but it's easy to infer because otherwise there's no way to determine the event's canceled state)

这篇关于为什么对复选框单击事件的preventDefault对checked属性返回true？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！