Déclencher un événement pour tous les écouteurs sauf le déclencheur lui-même

Question

J'ai quelques liens liés à un événement personnalisé. L'événement est déclenché en survolant l'un de ces liens. Cependant, je ne veux pas qu'il soit déclenché sur le lien que j'ai réellement plané.

Je peux penser à quelques solutions possibles

1. je mets un « si » dans la fonction de rappel pour l'événement et en quelque sorte de vérifier si l'objet de déclenchement est l'objet d'essayer d'exécuter la fonction de rappel et traiter avec t en conséquence. Les objets peuvent-ils être comparés de manière pratique et efficace?

2. Délier temporairement l'auditeur de l'objet qui déclenche l'événement, puis le relier par la suite. Cela ne semble pas être à l'épreuve des balles puisque l'événement pourrait être rebondi avant qu'il ne soit réellement déclenché? Je ne suis pas sûr de savoir comment ces types de files d'attente d'événements sont gérés. Le jquery.trigger affectera-t-il réellement tous les écouteurs avant l'exécution de la prochaine instruction? L'autre inconvénient est qu'il pourrait être considéré comme un hack au lieu d'une bonne pratique? Vous jugez?

3. Ignorez tout événement event-bind-trigger et rassemblez simplement tous les objets dans une matrice et laissez la fonction de rappel de survol parcourez-la en faisant ce que je veux. Je suppose que c'est quelque chose comme ce qui se passe réellement derrière les rideaux dans les scénarios ci-dessus

Existe-t-il une pratique courante pour résoudre ce problème? Quelque chose dans le modèle d'observateur peut-être? Attribuer à chacun des liens un ID et une classe.

Answer 1

Lorsque la souris entre dans la zone active de l'un de vos liens spéciaux, déclenchez votre événement personnalisé sur chacun d'entre eux avec l'ID du lien sur lequel la souris survole. Demandez à votre gestionnaire d'événements personnalisé de vérifier que cet ID ne correspond pas à l'ID des liens qui reçoivent une notification de l'événement.

<a class="fancy-hover" id="1" href="foo">Example Link 1</a> 
<a class="fancy-hover" id="2" href="bar">Example Link 2</a> 
<a class="fancy-hover" id="3" href="qux">Example Link 3</a> 

<script type="text/javascript"> 
    // custom event 
    $("a.fancy-hover").bind('mouseOverOneOfUs',function(event, whatMouseHoversOver){ 

     // Prevent item mouse is over from responding. 
     if (whatMouseHoversOver != this.id) { 
      // do something 
     } 
     return false; // Stop propagation up the DOM tree. Remove to allow propagation. 
    }); 

    // When mouse enters the active area of a link with class "fancy-hover", 
    //  tell all links in the class which member of the class has the mouse. 
    $("a.fancy-hover").mouseenter(function() { 

     // this.id is ID of current element, 
     //  and we pass the value as an array to our custom event. 
     $("a.fancy-hover").trigger('mouseOverOneOfUs', [this.id]); 
    }); 
</script>