时间戳

首页 > 解决方案 > 更改 DOM 中复选框的选中属性不适用于 event.preventDefault()

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

问题描述

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

let check = document.getElementById('check');
check.onclick = function(event) {
  event.target.checked = !event.target.checked;
  event.preventDefault();
}
<input id="check" type="checkbox" /> Checkbox

标签： javascript

解决方案

当然，在这个特定的示例中，您可能没有处理程序。但是您在评论中指出情况比问题中显示的更复杂。

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

let check = document.getElementById('check');
check.addEventListener("click", function({target}) {
  setTimeout(() => {
    target.checked = !target.checked;
  }, 0);
  event.preventDefault();
});
<input id="check" type="checkbox" /> 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();
};
<input id="check" type="checkbox" /> Checkbox

推荐阅读