Onmouseover s'exécute plusieurs fois lors du survol d'un élément ?

Question

Pourquoi onmouseover s'exécute-t-il plusieurs fois alors que je survole un élément ?

J'essaie d'exécuter une animation simple lorsque l'utilisateur survole une icône, mais elle s'exécute plusieurs fois.

Je le teste ici :

http://lujanventas.com/test.php

Quoi qu'il en soit, avez-vous des idées sur la façon de le réparer ? Peut-être en utilisant un écouteur à la place ?

C'est le javascript qui s'exécute au passage de la souris :

function upIcon(n) {
    console.log("Mouseover icon: " + n);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 );
    $('#icon' + n).animate({ backgroundPositionY : "+=15px" }, 200 );
    }

Answer 1

Essayez d'utiliser mouseenter y mouseleave au lieu de mouseover y mouseout . Le premier ne se déclenche que lorsque le curseur entre dans la région de l'élément et le second se déclenche également lorsque le curseur se déplace entre les descendants.

J'ai ajouté ce code à votre page via ma console et cela a fonctionné comme prévu :

//bind an event handler to each nav element for the mouseenter event
$('.categoryButtons').children().bind('mouseenter', function () {

    //call the `upIcon` function with the index of the current element
    upIcon(($(this).index() + 1));
});

J'ai également supprimé la ligne onmouseover pour chaque élément de la nav.

Mise à jour

Vous pouvez utiliser votre fonction existante de manière un peu différente et ne pas utiliser la fonction anonyme pour votre gestionnaire d'événements (remarquez le chaînage des fonctions pour éviter les sélections en double) :

function upIcon(event) {
    var n = ($(this).index() + 1);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 ).animate({ backgroundPositionY : "+=15px" }, 200 );
}

$('.categoryButtons').children().bind('mouseenter', upIcon);

Lorsque vous faites référence à une fonction existante en tant que gestionnaire d'événement, on lui transmet l'attribut event comme n'importe quel autre gestionnaire d'événement et vous pouvez également utiliser l'objet this pour faire référence à l'élément sur lequel l'événement a été déclenché.

Answer 2

Une ou deux choses :

• Pour résoudre votre problème, j'utiliserais plutôt l'événement mouseenter - cela signifie que lorsque la souris entre dans l'élément, le code est exécuté, puis vous pouvez utiliser mouseleave pour modifier à nouveau l'animation lorsque le pointeur de la souris s'en va.

• Plutôt que d'utiliser des événements onmouseover désordonnés, vous feriez mieux d'utiliser jQuery pour ce à quoi il est destiné : des codes discrets. Liez des événements aux éléments, par exemple

  $(document).ready(function() {
       $(".icon").mouseenter(function() {
            $(this).animate({ backgroundPositionY : "-=15px" }, 200 );
       });
  
       $(".icon").mouseleave(function() {
            $(this).animate({ backgroundPositionY : "+=15px" }, 200 );
       });
  
  });

Answer 3

Puisque vous utilisez jQuery, vous pouvez utiliser mouseenter au lieu de mouseover --Il est conçu pour vous protéger des événements de mouseout lorsque votre cible comporte plusieurs éléments.

Plus : http://api.jquery.com/mouseenter/

Ainsi, vous voudriez supprimer les événements attachés à chaque élément (ce qui n'est pas une grande forme en premier lieu, et à la place faire ce qui suit dans un bloc script :

$('.categoryButtons').find('a').mouseenter(function(){
    /* ... Do something, probably depending on $(this).attr('id') or $(this).attr('rel') ... */
});

Answer 4

Plutôt que d'utiliser onmouseover, je vous recommande d'utiliser mouseenter de JQuery pour éviter le déclenchement multiple du gestionnaire en raison du bouillonnement d'événements :

http://api.jquery.com/mouseenter/