Comment désactiver les événements de souris déclenchés par des éléments enfants?

Question

Permettez-moi de décrire le problème en détail:

J'en veux pour preuve absolue positionné div lors du survol d'un élément. C'est vraiment simple avec jQuery et fonctionne très bien. Mais lorsque la souris passe sur un des éléments d'enfant, il déclenche l'événement mouseout de la div contenant. Comment puis-je garder javascript depuis le déclenchement de l'événement mouseout de l'élément conteneur lorsque vous survolez un élément enfant.

Quel est le meilleur et le plus court moyen de le faire avec jQuery?

Voici un exemple simplifié pour illustrer ce que je veux dire:

Html:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Javascript/jQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

Answer 1

La question est un peu ancienne, mais je l’ai rencontré l’autre jour.

Le moyen le plus simple de le faire avec les versions récentes de jQuery consiste à utiliser les événements mouseenter / mouseleave plutôt que mouseover / mouseout.

Answer 2

Par souci de simplicité, je voudrais juste réorganiser un peu le code HTML pour insérer le contenu nouvellement affiché dans l'élément auquel l'événement mouseover est lié:

 <div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>
 

Ensuite, vous pourriez faire quelque chose comme ça:

 $('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );
 

---

Note: Je ne recommande pas les CSS en ligne, mais cela a été fait pour rendre l'exemple plus facile à digérer.

Answer 3

Vous êtes à la recherche pour le jQuery équivalent du javascript empêcher la remontée d'événements.

Check this out:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Fondamentalement, vous avez besoin pour attraper le cas dans les enfants les nœuds DOM, et il n'y arrêter leur propagation jusqu'à l'arbre du DOM. Une autre façon, bien que pas vraiment suggéré (comme il peut gravement mess avec les événements existants sur votre page), est de mettre en cas de capture d'un élément spécifique sur la page, et vous recevrez tous les événements. Ceci est utile pour le Mdn comportement et, mais certainement pas pour votre cas.

Answer 4

La façon dont je l'ai souvent vu ce traité est d'avoir un retard d'environ 1/2 seconde entre le déplacement de la souris à partir de la HoverMe élément. Lors du déplacement de la souris dans le planait élément, vous devez définir une variable qui indique que vous êtes planant au-dessus de l'élément, et puis fondamentalement arrêter le planait partie de sa cachette, si cette variable est définie. Ensuite, vous devez ajouter une semblable fonction masquer OnMouseOut de la planait élément pour le faire disparaître lorsque vous retirez la souris. Désolé, je ne peux pas vous donner le code, ou quelque chose de plus concret, mais j'espère que cela vous mène dans la bonne direction.