Comment émuler un événement mouseenter en utilisant la fonctionnalité live de jquery?

Question

Je veux utiliser la fonctionnalité live de jQuery pour un événement mouseenter, mais il n'est actuellement pas pris en charge. Ci-dessous est mon premier essai d'une solution, mais cela ne semble pas optimal. Suggestions? Améliorations?

// mouseenter emulation 
jQuery('.selector').live('mouseover',function (e) { 
    // live sees all mouseover events within the selector 
    // only concerned about events where the selector is the target 
    if (this != e.target) return; 
    // examine relatedTarget's parents to see if target is a parent. 
    // if target is a parent, we're "leaving" not entering 
    var entering = true; 
    jQuery(e.relatedTarget).parents().each(function() { 
      if (this == e.target) { 
       entering = false; 
       return false; // found; stop searching 
      } 
    }); 
    if (!entering) return; 
    /* 
    the rest of my code 
    */ 
}); 

Je ne peux pas vérifier les enfants cibles pour relatedTarget b/c il n'y a pas un moyen facile d'obtenir tous les nœuds enfants. Je ne peux pas vérifier directement si les parents de la cible ont relatedTarget comme parent et donc "entrant" la cible, b/c pour le passage de la souris, il pourrait être entré d'un frère adjacent et pas un parent.

Cette solution fonctionne bien. Je l'ai testé, et ça semble bien, mais comment pourrais-je l'améliorer? Il souffre également de la façon dont le DOM est mis en place. Une partie des éléments du sélecteur doit être exposée pour voir l'événement mouseover, mais c'est rarement un problème dans les exemples que j'essaie. Pourtant, s'il y a un moyen de garantir que cela sera vu, ce serait bien.

Je suppose que je veux savoir si j'aborde ce problème, et sinon, quoi de mieux?

Answer 1

Ça fait un moment maintenant sans preneur, donc je suppose qu'il n'y a rien de mieux.

Je l'utilise dans quelques projets maintenant, alors je vais le sortir de la pile de questions sans réponse.

J'espère que d'autres trouveront utile, et si vous trouvez un bug ou de trouver quelque chose de mieux, faites le moi savoir.

Answer 2

Juste couru dans quelque chose de similaire. Voici ma solution était

HTML:

<div class="dropdown"> 
    <span>Options</span> 
    <ul class="options"> 
    <li class="cart"><a href="http://amiestreet.com/saves/save/song/WGylTQo-A4Qx" rel="ui-lightbox"><span class="cart_drop">Add to cart</span></a></li> 
    <li class="add-to-playlist"><a href="/playlist/create/add-song/WGylTQo-A4Qx" rel="ui-lightbox">Add to playlist</a> 
     <ul class="playlists" style="display:none;"> 
      <li><a href="/playlist/create/add-song/WGylTQo-A4Qx" rel="ui-lightbox">Create New Playlist</a></li> 
      <li class="add-song-to-playlist"><a href="/playlist/MD6Cp1F7Y24x/addSong/WGylTQo-A4Qx" rel="WGylTQo-A4Qx">Free Tracks (Copy)</a></li> 
     </ul> 
    </li> 
    <li><a href="http://amiestreet.com/music/wiley/treddin-on-thin-ice/the-game">More info</a></li> 
    </ul> 
</div> 

JS

<script type="text/javascript"> 
    $(function(){ 
    $('.dropdown').live('mouseover', function(){ 
     $('.dropdown > .options:visible').hide(); 
     $(this).find('.options').show(); 
    }); 
    $('.dropdown').live('mouseout', function(e){ 
     if(!$(e.relatedTarget).is('ul.options') && $(e.relatedTarget).parents('ul.options').length==0){ 
      $(this).find('.options').hide(); 
     } 
    }); 
    }); 
</script> 

Answer 3

J'ai fini par faire:

$("#id").delegate(".selector", "mouseover", function(){ 
if(!$(this).hasClass("bound")){        
    $(this).hover(function(){ 
    alert('entering'); 
    }, 
    function(){ 
    alert('leaving'); 
    }).mouseover().addClass("bound"); 
} 
});