How should I emulate a mouseenter event using jquery's live functionality?

Question

I want to use jQuery's great live functionality for a mouseenter event, but it's currently unsupported. Below is my first go at a solution, but it doesn't seem optimal. Suggestions? Improvements?

// 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 
     */
});

I can't check target's children for relatedTarget b/c there's not an easy way to get all child nodes. I can't check directly if target's parents have relatedTarget as a parent and thus "entering" target, b/c for mouseover, it could be entering from an adjacent sibling and not a parent.

This solution works ok. I've tested it, and it seems fine, but how could I improve it? It also suffers from how the DOM is laid out. Some part of the selector elements must be exposed to see the mouseover event, but that's rarely a problem in the examples that I'm trying this on. Still, if there's a way to guarantee that it will be seen, that would be nice.

I guess I want to know if I'm approaching this right, and if not, what's better?

Answer 1

It's been a while now with no takers, so I'm assuming there's nothing better.

I'm using this in a couple projects now, so I'll take it out of the unanswered questions pile.

Hope others find it useful, and if you find a bug or come up with something better, let me know.

Answer 2

Just ran into something similar. Here was my solution

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"&gt;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>