web-dev-qa-db-fra.com

Quelle est la différence entre .click et .change sur une case à cocher

Je cherchais pour ajouter un événement à une case à cocher et j'aurais pensé que les gens utiliseraient .change pour configurer un événement de modification, mais à la place, j'ai constaté que les gens utilisent .click

Y a-t-il une raison à cela? Ils semblent tous les deux fonctionner correctement avec les événements cliqués et avec les changements de clavier. Suis-je en train de manquer quelque chose?

Si vous ne me croyez pas alors essayez-le vous-même

37
qwertymk

onchange dans IE ne se déclenche que lorsque la case à cocher perd le focus. Donc, si vous y accédez, appuyez plusieurs fois sur l'espace, tabulez, vous n'obtiendrez qu'un seul événement onchange, mais plusieurs événements onclick.

Remarque: c'est l'un des moments très, très, très rares où le comportement d'IE est correct (selon les spécifications) et où les autres navigateurs sont mauvais.

38
Mark Kahn

Deux raisons pour lesquelles onclick est préféré à onchange.

  1. Internet Explorer ne déclenche l'événement onchange que lorsque la case à cocher perd le focus (onblur). Donc onclick est plus une solution multi-navigateur.

  2. onchange ne se produit qu'après que l'élément a perdu le focus (vous ne verrez pas de différence puisque vous appelez alert et perdez le focus à chaque changement). Le pseudo-code sur MDC explique à peu près le element.onchange implémentation.

    control.onfocus = focus;
    control.onblur = blur;
    
    function focus () {
        original_value = control.value;
    }
    
    function blur () {
        if (control.value != original_value)
            control.onchange();
    }
    
6
naveen

.change ne fonctionne pas correctement pour au moins certains navigateurs populaires en ce qui concerne les changements de touches (l'option de sélection de l'utilisateur avec les touches fléchées haut/bas) mais ensuite .click ne surmonte pas cela non plus. Parfois, l'utilisation de keyup ou keydown ou quelque chose est utilisé en conjonction avec .change pour surmonter ce problème, mais cela commence à devenir un peu compliqué lorsque l'utilisateur tabule le document, car cela peut déclencher l'événement clé s'il n'est pas explicitement géré dans le rappel. Dans l'ensemble, c'est dommage que .change ne fonctionne pas comme vous vous en doutez, car cela résoudrait certains problèmes chronophages.

0
Rob

oui les deux fonctionnent, seul le clic ne regarde pas le changement d'objet réel (comme une case à cocher qui est cochée), le changement le fait.

Techniquement, il est plus fiable, mais dans la pratique, les deux fonctionnent.

0
cmplieger

Ils peuvent tous deux déclencher une modification de la valeur par défaut, mais vous pouvez remplacer la logique onClick pour NE PAS modifier la valeur d'une chackbox. Vous pouvez modifier la valeur via un autre point d'entrée. Il faut donc avoir un .click et un .change.

modifier - Je suis également d'accord avec le Dr Rob

0
IEnumerable