jQuery复选框的更改和单击事件之间的区别

Posted 2023-02-22

【中文标题】jQuery复选框的更改和单击事件之间的区别

【英文标题】：jQuery difference between change and click event of checkbox

【发布时间】：2012-06-27 16:33:09

【问题描述】：

正如标题所示，我想知道change 和click 复选框事件之间的区别（在jQuery 中）

我已经阅读了这个What the difference between .click and .change on a checkbox的答案

但是，它对我不起作用。 change 即使我在没有失去焦点的情况下击中空格也会触发。

这是fiddle demo

两者似乎都在工作。我在这里错过了什么吗？

【问题讨论】：

好像你自己回答了你的问题。

click 表示像任何其他元素一样单击复选框，change 表示复选框的值已更改。

但是每次点击都会改变值。那么有什么区别呢？

只要复选框的值发生更改，就会触发更改...这可以通过以下方式发生 - 1. 通过鼠标单击 2. 使用键盘更改其值 3. 以编程方式更改值...但是单击事件只会在您使用鼠标单击或以编程方式模拟鼠标单击时触发

@Jashwant 这个首先想到的是jsfiddle.net/8RFGn/1

【参考方案1】：

根据 W3C，onclick 事件由键盘触发以实现可访问性目的：

SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

为了在不使用鼠标的情况下为用户提供更好的用户体验，已开发出浏览器以触发 onclick 事件，即使 click 发生在键盘上。

因此，即使使用键盘的空格键单击复选框，jQuery 的click 事件也会触发。 change 显然会在每次复选框的状态更改时触发。

复选框恰好是change 和click 可互换的特殊情况，因为您不能在不触发click 的情况下触发change 事件。

当然，此规则的例外情况是如果您要使用 javascript 手动更改复选框，例如：

/* this would check the checkbox without firing either 'change' or 'click' */
$('#someCheckbox').prop('checked',true);

/* this would fire 'change', but not 'click'. Note, however, that this
   does not change the checkbox, as 'change()' is only the function that
   is fired when the checkbox changes, it is not the function that
   does the changing  */
$('#someCheckbox').trigger('change');

/* this would fire 'click', which by default change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

以下是这些不同操作的演示：http://jsfiddle.net/jackwanders/MPTxk/1/

希望这会有所帮助。

【讨论】：

The checkbox just happens to be the special case where change and click are interchangable, because you can't fire the change event without also triggering click 我只需要这样一个简单直接的词。我会等一段时间。如果没有人反对你的话，你就会得到赏金。

@pozs，也提供了很好的区别。但是你应该得到一个赏金来总结一切和一个 w3c 键盘链接onclick。

人们可能应该注意到一个差异。如果您使用的是 IE10/11，如果复选框处于不确定状态（即使您单击它），“更改”事件将不会因为错误而触发。请参阅错误bountysource.com/issues/… 'click' 事件将可靠地触发虽然

答案中的这一部分“复选框恰好是更改和单击可互换的特殊情况，因为您无法在不触发单击的情况下触发更改事件。”在大多数情况下是正确的。但是，用户应该注意，也有例外。正如我刚刚发现的那样，如果您尝试检测这样的键 - if(event.shiftKey) - 它仅适用于点击而不适用于更改。以防万一它可以帮助任何人

【参考方案2】：

主要区别：当您首先单击/点击焦点复选框上的空格时，click 事件被触发，没有任何变化。此时，您仍然可以阻止默认操作（使用event.preventDefault()），即切换该复选框的checked 状态，并触发change 事件（没有默认操作）。

在某些浏览器中，仅在click 之后的第一个blur 之后才会触发更改事件。

【讨论】：

优秀。将我的 fiddle 更新为 preventDefault() 。在 click 事件上，它会停止点击，但在 check 事件上不会，它不会停止检查 :) 它的主要区别之一

【参考方案3】：

当复选框的状态发生变化时触发Change事件，无论是通过在复选框聚焦时按下空格或触发更改事件或单击而发生的任何事件，当我们通过鼠标单击复选框时，单击事件才被触发单击但在单击之前如果已指定更改事件，则它也会运行然后执行单击事件。

在这里您可以看到已在垃圾箱上完成了清晰的脚本：http://codebins.com/codes/home/4ldqpbu

【参考方案4】：

我体验到的不同是这样的：

var $check = $(':checkbox');
$checkbox.checked = true;
$checkbox.click( function() 
    alert(this.checked); // true
).change( function() 
    alert(this.checked); // false
);

所以点击状态还没有改变，改变它...

【讨论】：

点击不会通过键盘触发应该是不言自明的imo

这是一个很好的观点。但它似乎失败了here

【参考方案5】：

如果这没有帮助，请告诉我，我将删除我的帖子：

Change : http://api.jquery.com/change/ - 我认为当元素的state 发生更改（即未单击但更改）时会触发更改事件。 复选框有选中和未选中状态。

Click：点击事件是当你点击元素时，复选框的状态无关紧要。

类似于伪代码

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);

【讨论】：

但是在checkbox 中，每个click 都会改变状态。你能指出他们工作方式不同的背景吗

是的，当然； change 是状态发生变化的时候，click 是简单的点击事件。即状态发生变化（选中/未选中）；当用户点击时触发点击，让我知道这是否有意义，

@Jashwant 大声笑兄弟，您将click 事件与切换绑定，然后unbinding 为什么？ :) ==> .unbind('click').bind('change', cb); 或 .unbind('change').bind('click', cb); Bazinga？

我正在绑定/取消绑定click 和change 上的checkbox 上的每个click 的button 的事件。那有什么问题？

嗨 @Jashwant 不确定这样做会取得什么成果，这就是我的意思，反正我的结局太晚了，所以我要睡觉了，放轻松，欢呼:)

【参考方案6】：

您可以在不单击的情况下选中或取消选中复选框，使用键盘（制表符和空格键）这将更改语句但不单击。恕我直言

【讨论】：

change 即使使用鼠标也会触发事件

我是这个意思。我的意思是即使没有鼠标点击也会触发更改。

click 在没有鼠标点击的情况下触发事件:)

【参考方案7】：

我猜想当复选框更改时会触发更改（即使您没有单击它）。例如，如果您通过其他功能更改复选框的状态。