为什么在 checkbox click 事件上 preventDefault 为选中的属性返回 true?

问题描述

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

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

假设我有一个复选框类型的输入元素，它附加了一个事件侦听器，用于侦听单击事件.我阻止了复选框的默认行为并记录了复选框的选中状态，这将始终返回 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.

根据我的理解，prevent default 将取消事件而不停止传播，那么这里到底发生了什么?

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>

推荐答案

实际上，click 处理程序中 checked 值的结果是实现相关的.

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 元素上的点击事件期间，某些实现可能会在事件正在文档中分派.如果事件的默认操作被取消，则该属性的值可能会变回其原始值.这意味着在处理点击事件期间该属性的值取决于实现.

但是当我去掉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 规范，input[type=checkbox] 元素的选中状态在取消的激活过程中恢复，根据 激活 部分.所以在事件处理程序的执行过程中，元素的检查状态还没有恢复.

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)

这篇关于为什么在 checkbox click 事件上 preventDefault 为选中的属性返回 true?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！