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

Question

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

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

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

这是一个小提琴演示

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

Answer 1

根据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/

希望这可以帮助.

Answer 2

主要区别在于:当您在聚焦复选框上单击/命中空间时,首先click触发事件,而不进行任何更改.此时,您仍然可以阻止默认操作(with event.preventDefault()),该操作将切换该checked复选框的状态,并触发change事件(没有默认操作).

在某些浏览器中,更改事件将仅在第一个blur之后触发click.