web-dev-qa-db-fra.com

jQuery différence entre la modification et l'événement de clic de la case à cocher

Comme le titre le suggère, je veux connaître la différence entre l'événement change et click de la case à cocher (dans jQuery)

J'ai lu la réponse à cette question Quelle est la différence entre .click et .change sur une case à cocher

Mais, ça ne marche pas pour moi. change se déclenche même lorsque je touche des espaces sans perdre le focus.

Voici une démonstration de violon

Les deux semblent fonctionner de la même manière. Est-ce que j'ai râté quelque chose ?

javascriptjquerycheckboxonchange
29
Jashwant

Selon le W3C, l'événement onclick est déclenché par le clavier à des fins d'accessibilité:

SCR35: Rendre le clavier d'actions accessible en utilisant l'événement onclick des ancres et des boutons

Afin de fournir une meilleure expérience utilisateur à ceux qui n’utilisent pas de souris, des navigateurs ont été développés pour déclencher l’événement onclick même si le click se produit avec un clavier.

Pour cette raison, l'événement click de jQuery se déclenchera même si la case à cocher est cliqué en utilisant la barre d'espace du clavier. change, évidemment, se déclenchera à chaque changement d'état de la case à cocher.

La case à cocher se trouve être le cas spécial où change et click sont interchangeables, car vous ne pouvez pas déclencher l'événement change sans déclencher également click.

Bien sûr, l'exception à cette règle est si vous deviez utiliser javascript pour modifier manuellement la case à cocher, comme:

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

Voici une démonstration de ces différentes actions: http://jsfiddle.net/jackwanders/MPTxk/1/

J'espère que cela t'aides.

55
jackwanders

La principale différence: lorsque vous cliquez/appuyez sur l'espace sur une case à cocher ciblée, l'événement click est déclenché, sans aucune modification. À ce stade, vous pouvez toujours empêcher l'action par défaut (avec event.preventDefault()) qui serait de basculer l'état checked de cette case à cocher et de déclencher l'événement change (qui n'a pas pas d'action par défaut).

Dans certains navigateurs, l'événement change ne se déclenche qu'après le premier blur après le click.

7
pozs

Je suppose que ce changement se déclenche lorsque la case à cocher change (même si vous ne cliquez pas dessus). Par exemple, si vous modifiez l'état de la case à cocher via une autre fonction.

3
PaperThick

La différence que j'ai vécue est la suivante:

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

Donc, avec un clic, l'état n'a pas encore changé, avec un changement, il a ...

1
Simon

L'événement de changement se déclenche lorsque l'état de la case à cocher a été modifié, quelle que soit l'occurrence qui se produira, soit en appuyant sur l'espace lorsque la case à cocher était ciblée, soit en déclenchant l'événement de modification, ou en cliquant sur l'événement Where as Click, qui n'a été déclenché que lorsque nous avons cliqué sur la case à cocher par clic de souris, mais à cette fois avant le clic si l'événement de modification a été spécifié, il s'exécute également, puis exécute l'événement de clic.

Ici, vous pouvez voir qu'un script clair a été fait sur les bacs: http://codebins.com/codes/home/4ldqpb

0
gaurang171

vous pouvez cocher ou décocher la case sans cliquer, en utilisant le clavier (tabulation et barres d'espace) cela va changer la déclaration mais pas cliquer. A mon humble avis

0
F0G

S'il vous plaît laissez-moi savoir si cela n'aide pas, je supprimerai mon message:

Change: http://api.jquery.com/change/ - Je pense que l'événement de changement est déclenché lorsque le state de l'élément s'il est modifié c'est-à-dire non cliqué mais modifié. La case à cocher est cochée et décochée.

Click: l'événement click se produit lorsque vous cliquez sur l'élément, quel que soit l'état de la case à cocher.

comme dans le pseudo code

if checkbox state is checked

    alert(Hulk is awesome);

if checkbox is click every time

    alert(Ironman is alright);
0
Tats_innit