Have Geek Brain

How do I emulate a mouseenter event using jquery live?

I want to use jQuery's excellent live function for mouseenter event, but it is currently not supported. Below is my first solution, but it doesn't seem to be 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 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 cant check target children for relatedTarget b / c but no easy way to get all child nodes. I cannot check directly if the target parents have bound the Target as parent and thus "inject" the target, b / c for mouseover, it can come in from the neighboring sibling and not from the parent.

This solution works fine. I tested it and it seems fine, but how can I improve it? It also suffers from the way the DOM is laid out. Some of the selector elements need to be shown in order to see the mouseover event, but this is rarely an issue in the examples I'm trying to do. However, if there is a way to ensure that it is visible, it will be fine.

I think I want to know if this right is right for me, and if not, what is better?

0


a source to share


3 answers


It has been a while without receptions, so I don't assume there is anything better there.

I am using this on several projects now, so I will pick this from the unanswered questions.



Hopefully others find this helpful, and if you find a bug or come up with something better, let me know.

0


a source


I ended up working:



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


a source


Just stumbled upon something similar. Here is 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">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>
0


a source






More articles:


All Articles