31

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

我已经阅读了这个答案.click 和 .change on a checkbox 有什么区别

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

这是一个小提琴演示

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

4

7 回答 7

59

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

SCR35：通过使用锚点和按钮的 onclick 事件使操作键盘可访问

为了给不使用鼠标的用户提供更好的用户体验，已经开发了浏览器来触发onclick事件，即使点击是通过键盘发生的。

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

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

当然，这条规则的例外是如果您要使用 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/

希望这可以帮助。

于 2012-06-28T19:24:01.247 回答
9

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

在某些浏览器中，更改事件只会blur在click.

于 2012-07-03T20:44:58.137 回答
3

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

于 2012-06-26T11:08:59.050 回答
1

我经历的不同是：

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

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

于 2012-06-26T11:22:58.060 回答
0

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

于 2012-06-26T11:09:53.193 回答
0

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

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

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

就像在伪代码中

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);
于 2012-06-26T11:13:40.780 回答
0

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

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

于 2012-07-03T13:24:51.700 回答