Question

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

我已阅读了此What the difference between .click and .change on a checkbox

的答案

但是，它不适合我。即使我在没有失去焦点的情况下击中空格，change也会发射。

这是fiddle demo

两者似乎都是一样的。我在这里错过了什么吗？

Answer 1

根据W3C，键盘会触发onclick事件以便于访问：

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

为了向不使用鼠标的用户提供更好的用户体验，即使用键盘发生点击，也会开发浏览器来触发onclick事件。< / p>

出于这个原因，即使使用键盘的空格键点击复选框，jQuery的click事件也会触发。显然，change会在每次复选框的状态发生变化时触发。

该复选框恰好是change和click可互换的特殊情况，因为您无法在不触发change的情况下触发click事件。< / p>
当然，此规则的例外情况是，如果您使用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/

希望这有帮助。

Answer 2

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

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

Answer 3

我猜想当复选框改变时（即使你没有点击它），这个改变就会激发。例如，如果您通过其他功能更改复选框的状态。

Answer 4

您可以选中或取消选中复选框而不点击，使用键盘（制表符和空格键）这会转到更改语句但不能单击。 IMHO

Answer 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);

Answer 6

我遇到的不同之处是：

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

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

Answer 7

当复选框被聚焦时，通过按空格键更改复选框状态更改事件触发或触发更改事件或单击仅当我们通过鼠标单击复选框时触发Click事件时单击，但在单击之前，如果已指定更改事件，则它也会运行，然后执行单击事件。

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

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

7 个答案: