更改 DOM 中复选框的选中属性不适用于 event.preventDefault()答案

【问题标题】：changing of checked property of checkbox in DOM not working with event.preventDefault()更改 DOM 中复选框的选中属性不适用于 event.preventDefault()
【发布时间】：2019-04-28 20:30:34
【问题描述】：

我了解，如果您更改 DOM 中的某些属性，它会反映在 UI 中，并且 event.preventDefault() 函数会阻止默认更改。现在在这个脚本中我更改了 DOM 并停止了默认操作，但它没有反映在交互中？

let check = document.getElementById('check');
check.onclick = function(event) {
  event.target.checked = !event.target.checked;
  event.preventDefault();
}

&lt;input id="check" type="checkbox" /&gt; Checkbox

【问题讨论】：

你到底想要发生什么？
我想切换复选框，但它没有发生，@connexo 是的，我自己在做，但它不起作用
@ArpitKarwasara 删除 js .checkbox 有一个默认切换
@prasanth 是的，他们有，但我需要实现一些需要我控制默认行为的更多功能，现在在控制台上执行 check.target.checked = !check.target.checked 它可以工作，但是不是这种情况

标签： javascript

【解决方案1】：

在这个特定的例子中，当然，你可以没有处理程序。但是您在 cmets 中指出情况比问题中显示的要复杂。

您必须让事件完成处理，然后才能更改框的选中状态并保持该更改，例如使用旧的 setTimeout(..., 0) 技巧：

let check = document.getElementById('check');
check.addEventListener("click", function({target}) {
  setTimeout(() => {
    target.checked = !target.checked;
  }, 0);
  event.preventDefault();
});

&lt;input id="check" type="checkbox" /&gt; Checkbox

（像Promise.resolve().then(...) 这样的微任务不起作用，至少在 Chrome 上是这样，显然你必须回到主事件循环。）

该示例还使用 addEventListener 而不是 onclick 和 ES2015+ 解构（函数参数列表中的 {target}），因为您使用的是 let，因此似乎使用的是 ES2015+。

但它也可以使用 onclick：

let check = document.getElementById('check');
check.onclick = function({target}) {
  setTimeout(() => {
    target.checked = !target.checked;
  }, 0);
  event.preventDefault();
};

&lt;input id="check" type="checkbox" /&gt; Checkbox

【讨论】：

谢谢@T.J. Crowser 但我的理解是，由于 javascript 正在执行，浏览器要么完成处理事件，要么稍后处理它，还有什么正在处理？
@ArpitKarwasara 这可能会有所启发：stackoverflow.com/questions/30426523/…
@ArpitKarwasara - 事件的处理是 DOM（在浏览器中）和您的 JavaScript 代码之间的来回。您的处理程序在 DOM 将事件分派到复选框时运行，但事件也会冒泡到复选框的祖先元素。因此，即使在您的事件处理程序完成之后，还有更多的处理工作要做。（我应该说我不太明白 为什么 preventDefault 和自己更改 checked 在这种情况下不起作用。它会在某个地方 in here，但是......： -))

【解决方案2】：

感谢大家的帮助，经过挖掘，我得出了这样的结论：

1) 最初浏览器切换选中的值并调用事件监听器

2) 现在它再次遇到一个切换语句，它再次切换值，现在值恢复到原来的值

3) 现在调用 preventDefault()，它在 eventlisteners 的气泡之后执行（我认为），它看到 check 的新值与初始值相同（我认为它会跟踪）并且什么都不做（如果它被改变，它会再次切换）。

如果您替换该行 - event.target.checked = !event.target.checked; 您可以看到 preventDefault() 切换，但在这种情况下它不会切换。

【讨论】：