.hover (…) et sur. (“hover”…) se comporter différemment

À l’aide de JQuery, j’essaie d’enchaîner plusieurs fonctions lorsqu’un élément a un état de survol.

J’utiliserais normalement la fonction d’événement .hover , mais après avoir lu certains tutoriels, j’ai .on était préférable d’utiliser .on car vous pouvez utiliser un seul gestionnaire d’événements pour surveiller tous les événements dans un document.

Cependant, je rencontre des problèmes lorsque je chaîne deux fonctions, comme ceci:

 $("element").on( "hover", function() { console.log("one"); }, function() { console.log("two"); });

Je m’attendais à un résultat de deux (ce qui était le cas avec .hover ), mais au lieu de cela, je reçois deux deux .

Quelqu’un peut-il expliquer ce que je fais mal ou s’il s’agit d’un comportement attendu et pourquoi?

Reproduit avec .hover(...) : http://jsfiddle.net/gXSdG/

Reproduit avec .on(hover...) : http://jsfiddle.net/gXSdG/1/

.on() ne peut prendre qu’une fonction, vous devez donc interroger l’ event passé pour vérifier quel était l’événement. Essaye ça:

 $("element").on("hover", function(e) { if (e.type == "mouseenter") { console.log("one"); } else { // mouseleave console.log("two"); } });

Exemple de violon

Vous pouvez également fractionner les deux événements constituant la méthode hover() – mouseenter et mouseleave :

 $("#element").on("mouseenter", function() { console.log("one"); }).on('mouseleave', function() { console.log("two"); });

 #element { background-color: black; height: 100px; margin: 100px; width: 100px; }

Vous venez de confondre ce qui se passait au départ, il n’ya pas de fonction enchaînée dans aucun de vos exemples. Les API de hover et on sont différentes, lisez-les attentivement et voici un aperçu de votre problème:

hover prend un ou deux arguments, les deux fonctions. La première est exécutée lorsque la souris entre, la seconde lorsque la souris quitte.

on prend seulement un rappel, et votre première fonction n’est jamais utilisée, car elle est utilisée pour un paramètre différent, et la seconde est utilisée comme rappel et appelle tous les événements survolés, c’est-à-dire entrée et sortie de souris.