Question

我了解到，如果您更改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

Answer 1

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

您必须让事件完成处理，然后才能更改复选框的选中状态并保留更改标记，例如，使用旧的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

Answer 2

感谢所有帮助人员，经过挖掘，我得出以下结论：

1）最初，浏览器切换检查值并调用事件监听器

2）现在，它再次遇到切换语句，并且再次切换了值，现在值又回到了原始状态

3）现在调用了preventDefault（），它在事件侦听器冒泡之后执行（我认为），并且它看到checked的新值与初始值相同（我认为它跟踪），并且什么都不做（如果更改，它将再次切换）。

如果您替换行-event.target.checked =！event.target.checked; 您可以看到preventDefault（）切换，但在这种情况下不会切换。

更改DOM中复选框的选中属性不能与event.preventDefault（）一起使用

2 个答案: