复选框上的.click和.change有什么区别[重复]答案

【问题标题】：What the difference between .click and .change on a checkbox [duplicate]复选框上的.click和.change有什么区别[重复]
【发布时间】：2011-07-31 07:50:32
【问题描述】：

我正在四处寻找向复选框添加事件，我原以为人们会使用 .change 来设置更改事件，但我发现人们正在使用 .click

这是有原因的吗？它们似乎在单击事件和键盘更改时都可以正常工作。我错过了什么吗？

如果你不相信我，那么try it out yourself

【问题讨论】：

标签： javascript jquery checkbox click

【解决方案1】：

onchange 在 IE 中仅在复选框失去焦点时触发。因此，如果您使用 Tab 键，按几次空格键，然后退出，您只会获得一个 onchange 事件，但会获得几个 onclick 事件。

注意：这是 IE 的行为正确（根据规范）而其他浏览器错误的非常、非常、非常罕见的情况之一。

【讨论】：

也很有趣不知道你点击了类似的东西
实际上它也适用于点击。如果您单击复选框两次，然后单击其他位置，您将不会收到 onchange 事件（单击两次会将其返回到初始值），但您会收到两个 onclick 事件。
值得注意的是，onchange 仅在文本字段中的焦点发生变化时触发 - 我不知道复选框的行为有所不同，但我想这是因为它们的焦点没有很好地定义。跨度>

【解决方案2】：

onclick 优于 onchange 的两个原因。

Internet Explorer 仅在复选框失去焦点 (onblur) 时触发 onchange 事件。所以onclick更像是一个跨浏览器的解决方案。
onchange 仅在元素失去焦点后发生。（您不会看到差异，因为您正在调用警报并失去对每个更改的关注）。 MDC 上的伪代码几乎解释了element.onchange 的实现。
```
control.onfocus = focus;
control.onblur = blur;

function focus () {
    original_value = control.value;
}

function blur () {
    if (control.value != original_value)
        control.onchange();
}
```

【讨论】：

仅供参考，除 IE 之外的所有浏览器（以及 FF、Chrome、Safari 无论如何）都会在复选框上立即触发 onchange。
@cwolves：我知道。但是 56% 的用户仍然使用 IE :) en.wikipedia.org/wiki/Usage_share_of_web_browsers
您的链接显示平均 45% :)
提到了网络应用分享:)
:) 无论如何，它比我最初预期的要少得多。从程序员的角度来看，这非常好:)

【解决方案3】：

.change 至少在某些流行的浏览器中无法正常工作，与键更改有关（用户使用向上/向下箭头键选择选项），但 .click 也无法克服这一问题。有时使用 keyup 或 keydown 或其他东西与 .change 结合使用来克服这个问题但是当您用户的选项卡文档时它开始变得有点混乱，因为如果它没有在回调中明确处理，这可能会触发关键事件。总而言之，遗憾的是 .change 不能像您期望的那样工作，因为它可以解决一些耗时的问题。

【讨论】：

【解决方案4】：

是的，两者都有效，仅单击不会查看实际对象的更改（例如选中的复选框），更改会。

从技术上讲，它更可靠，但实际上两者都有效。

【讨论】：

【解决方案5】：

默认情况下，它们可能都会触发值的更改，但您可以覆盖 onClick 逻辑以不更改复选框的值。您可以通过另一个入口点更改该值。所以需要一个 .click 和一个 .change。

编辑 - 我也同意 Rob 博士的观点

【讨论】：