Question

我想使用jQuery为mouseenter事件提供的出色的实时功能，但它目前尚不受支持。下面是我的第一个解决方案，但它似乎不是最佳的。建议？改进？

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

我无法检查目标的子项是否有相关的目标b / c，这并不是一种简单的方法来获取所有子节点。我不能直接检查目标的父母是否将relatedTarget作为父母，因此“输入”目标，b / c用于鼠标悬停，它可能是从相邻的兄弟进入而不是父母。

这个解决方案可行。我测试了它，看起来很好，但我怎么能改进呢？它也受到DOM布局的影响。必须暴露选择器元素的某些部分才能看到鼠标悬停事件，但这在我尝试使用的示例中很少出现问题。不过，如果有办法保证它会被看到，那就太好了。

我想我想知道我是否接近这个权利，如果没有，那还有什么好处？

Answer 1

我最终做了：

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

Answer 2

现在已经有一段时间没有接受者了，所以我假设没有什么比这更好了。

我现在正在几个项目中使用它，所以我会把它从未解决的问题堆中拿出来。

希望其他人觉得它很有用，如果你发现了一个错误或想出更好的东西，请告诉我。

Answer 3

刚遇到类似的事情。这是我的解决方案

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>

我应该如何使用jquery的实时功能模拟mouseenter事件？

3 个答案: