j查询复选框的更改和单击事件之间的差异

jQuery difference between change and click event of checkbox

本文关键字：之间 事件 单击 查询 复选框      更新时间：2023-09-26

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

我已经阅读了这个问题的答案 复选框上的.click和.change有什么区别

但是，它对我不起作用。 即使我击中空间而不会失去焦点，change也会开火。

这是一个小提琴演示

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

根据 W3C 的说法，出于辅助功能目的，onclick事件由键盘触发：

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

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

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

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

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

希望这有帮助。

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

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

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

我经历的区别是这样的：

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

因此，单击状态尚未更改，更改后

...

您可以选中或取消选中复选框而无需单击，使用键盘（制表符和空格键）这将更改为更改语句，但不能单击。恕我直言

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

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

更改事件在复选框状态已更改时触发 无论发生什么情况，要么通过按住空格键 当复选框聚焦时 或触发更改事件 或单击"单击事件的位置"仅当我们通过鼠标单击复选框时才触发，但在单击之前 如果指定了更改事件，则它也运行，然后执行单击事件。

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

相关文章：