当绑定(bind)到用于复选框输入的click事件时,复选框在事件处理程序运行时已经被切换,并且更奇怪的是,如果我指定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 for that code

警报将响应“true”(或复选框预单击的相反状态)。消除警报后,该复选框将切换回去。

所以,我想问题是

实际阻止的默认事件是什么?我以为我的事件处理程序应在状态更改之前运行,这是错误的吗?有没有办法合法拦截复选框点击?

以及为什么世界上的preventDefault导致重新切换复选框?

最佳答案

阻止的实际默认事件是click事件。发生误解的原因可能是您认为事件是在完全处理完实际点击后触发的(即复选框已切换),而实际上事件模型规定了在处理事件时触发处理程序。

如果有帮助,我发现另一个对解释其工作方式有用的模型是数据库事务模型:将事件处理程序视为事务的一部分被调用,其中的复选框已在其中切换。

  • 如果您阅读复选框的状态,则会发现它处于切换状态(“写”已发送到数据库)。
  • 但是,您仍然可以决定回滚事务(在这种情况下,写操作将被撤消,并且复选框将切换回其原始值)。
  • 09-20 23:01