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

标题建议我想知道复选框的changeclick事件之间的区别(在jQuery中)

我已经读过这个答案了.click和.change在复选框上有什么区别

但是,它不适合我。 即使我在没有失去焦点的情况下击中空间也会change火焰

这是一个小提琴演示

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

根据W3C, onclick事件由键盘触发以实现可访问性:

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

为了给那些不使用鼠标的人提供更好的用户体验,已经开发了浏览器来触发onclick事件,即使用键盘发生点击也是如此。

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

该复选框恰好是changeclick可互换的特殊情况,因为您无法触发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 automatically triggers 'change' */ $('#someCheckbox').trigger('click'); 

以下是这些不同行为的演示: http : //jsfiddle.net/jackwanders/MPTxk/1/

希望这可以帮助。

主要区别在于:当你点击/点击一个焦点复选框上的空格时,首先触发click事件,没有任何变化。 此时,您仍然可以阻止默认操作(使用event.preventDefault() ),该操作将切换该复选框的已checked状态,并触发change事件(尚未执行默认操作)。

在某些浏览器中,更改事件仅在click后第一次blur后才会触发。

我猜想当复选框改变时(即使你没有点击它),更改会激活。 例如,如果您通过其他function更改复选框的状态。

您可以选中或取消选中复选框而不点击,使用键盘(制表符和空格键),这将转到更改语句,但不能单击。 恕我直言

如果这没有帮助,请告诉我,我将删除我的post:

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

我遇到的不同之处是:

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

所以点击状态还没有改变,改变它有……

当复选框被聚焦时通过按空格键发生任何事件更改复选框状态时触发更改事件触发或触发更改事件或单击仅当我们通过单击鼠标单击复选框时触发了Click事件如果指定了更改事件,那么在点击之前的那个时间它也会运行,然后执行click事件。

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