javascript - 为什么 preventDefault on checkbox click 事件为 checked 属性返回 true?

标签 javascript checkbox

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

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

复选框的视觉表示告诉我它没有被选中。所以我假设检查状态将返回 false。我确定这一定很愚蠢,而且我肯定误解了这里的某些内容。有趣的是,我也在记录事件本身。在 target 属性内部,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>

最佳答案

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

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

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

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.

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

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


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

根据HTML Spec , input[type=checkbox] 元素的检查状态在取消的激活过程中恢复,根据 Activation,它位于事件处理程序之后。部分。因此,在事件处理程序执行期间,元素的检查状态尚未恢复。

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

关于javascript - 为什么 preventDefault on checkbox click 事件为 checked 属性返回 true?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30426523/

相关文章:

java - ListView 选中的复选框

java - 复选框始终返回 true .getSelection();

php - 如何从表单插入多个值,包括多个复选框

javascript - 使用复选框 JavaScript 禁用按钮

javascript - 通过 JavaScript 变量获取对象值

javascript - Jade 模板中的日期选择器

javascript - 命名空间 SVG 上的交互

javascript - TVML 创建动态模板

javascript - 单击时切换按钮的颜色(并恢复其他按钮的颜色)

html - 调整窗口大小时保持复选框在表单中的位置