6

当绑定到复选框输入的单击事件时，复选框在我的事件处理程序运行时已经切换，更奇怪的是，如果我指定 event.preventDefault(); 在我的事件处理程序运行后切换会反转。

<input id="foo" type="checkbox"/>

function clicked(evt) {
   alert(document.getElementById('foo').checked);
   evt.preventDefault();
}

document.getElementById('foo').addEventListener('click',clicked);

[在 chrome 和 firefox 中测试]

该代码的 JSFiddle

警报将响应“真”（或复选框预单击的相反状态）。关闭警报后，复选框会切换回来。

所以，我想问题是，

被阻止的实际默认事件是什么？假设我的事件处理程序应该在状态更改之前运行，我错了吗？有没有办法合法地拦截复选框点击？

为什么在世界上是 preventDefault 导致重新切换复选框？

4

1 回答 1

8

被阻止的实际默认事件是事件click。可能会出现误解，因为您认为事件是在实际单击已完全处理后触发（即复选框已被切换），而实际上事件模型规定处理程序在处理事件时触发。

如果它有帮助，我发现另一个有助于解释它是如何工作的模型是数据库事务模型：将您的事件处理程序视为作为事务的一部分被调用，其中复选框已被切换。

  • 如果您阅读复选框的状态，您会发现它已切换（“写入”已发送到数据库）。
  • 但是，您仍然可以决定回滚事务（在这种情况下，写入被撤消并且复选框被切换回其原始值）。
于 2011-09-15T17:45:19.693 回答