我應該如何使用jquery的實時功能模擬mouseenter事件？

我想爲一個mouseenter事件使用jQuery的實時功能，但目前它不受支持。下面是我的第一個解決方案，但看起來並不理想。建議？改進？我應該如何使用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 
    */ 
});

我無法檢查目標的children爲relatedTarget b/c有沒有一種簡單的方法來獲取所有的子節點。我不能直接檢查，如果目標的父母有relatedTarget作爲父母，因此「輸入」目標，B/C的鼠標懸停，它可能是從鄰接兄弟姐妹而不是父母進入。

此解決方案工作正常。我測試過了，看起來很好，但我怎麼能改進它？它也受到DOM如何佈局的困擾。選擇器元素的某些部分必須暴露才能看到mouseover事件，但這在我嘗試使用的示例中很少出現問題。不過，如果有一種方法可以保證它可以被看到，那會很好。

我想我想知道如果我正在接近這個權利，如果沒有，有什麼更好？

來源

2009-05-21 Keith Bentrup

現在已經有一段時間沒有接受者，所以我假設沒有更好的。

我現在在幾個項目中使用它，所以我會把它從未回答的問題中拿出來。

希望別人覺得它有用，如果你發現一個錯誤或想出更好的東西，讓我知道。

來源

2009-06-21 07:52:38

剛碰到類似的東西。這裏是我的解決方案

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>

<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>

來源

2009-10-22 19:43:53

我落得這樣做：

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

來源

2010-12-05 00:21:56 Matrym

我應該如何使用jquery的實時功能模擬mouseenter事件？

回答

相關問題