jQuery的更改和点击事件之间的区别复选框 [英] jQuery difference between change and click event of checkbox

问题描述

由于标题建议我想知道更改和点击复选框的事件之间的差异（在jQuery中）

我已经阅读了这个复选框上的.click和.change之间的区别

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

这是一个小提示演示

两者似乎都一样。

解决方案

根据W3C， onclick 事件由键盘触发，用于辅助功能：

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

为了提供更好的用户体验没有使用鼠标的浏览器，即使使用键盘发生点击，浏览器也可以触发 onclick 事件。

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

复选框刚好是特殊情况更改和点击是可以互换的，因为您不能触发更改事件，而不触发点击。

当然，这个规则的例外是，使用javascript手动更改复选框，例如：

  / *这将检查复选框而不触发更改 'click'* / 
 $（'＃someCheckbox'）。prop（'checked'，true）; 
 
 / *这将触发更改，但不是点击。然而，注意，这个
不会改变复选框，因为'change（）'只是
被触发时的复选框更改的函数，它不是
的函数改变* / 
 $（'＃someCheckbox'）。trigger（'change'）; 
 
 / *这将触发'click'，默认情况下会自动触发'change'* / 
 $（'＃someCheckbox'）。 
  

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

希望这有帮助。

As title suggests I want to know the difference between the change and click event of checkbox (in jQuery)

I have read down the answer to this What the difference between .click and .change on a checkbox

But, its not working for me. change fires even when I hit spaces without losing focus.

Here's a fiddle demo

Both seems to be working alike. Am I missing something here ?

解决方案

According to the W3C, the onclick event is triggered by the keyboard for accessibility purposes:

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

In order to provide a better user experience for those without the use of a mouse, browsers have been developed to fire the onclick event even if the click occurs with a keyboard.

For this reason, jQuery's click event will fire even if the checkbox is clicked by using the keyboard's spacebar. change, obviously, will fire every time the checkbox's state changes.

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.

Of course, the exception to this rule is if you were to use javascript to manually alter the checkbox, such as:

/* 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');

Here's a demonstration of these different actions: http://jsfiddle.net/jackwanders/MPTxk/1/

Hope this helps.

这篇关于jQuery的更改和点击事件之间的区别复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！