菜單包含mouseenter和mouseleave事件

Question

介紹：
大家好。 我正在嘗試做菜單，但我遇到了mouseenter / mouseleave事件的問題。

到目前為止我有什么：

$("#icon").click(function() {
    $("#invis").css("display", "block");
    $("#icon").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block"); 
    });
    $("#invis").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block");
    });
});​  

到目前為止，我試過這個。 我的觀點是點擊“圖標”，這個點擊會顯示一個菜單/另一個隱藏的元素。 現在我想讓它保持打開狀態，因為有人將鼠標懸停在“圖標”或實際菜單上。 但是我提供的代碼，一旦我離開鼠標然后再次輸入“icon”，它仍然保持onmouseenter事件，菜單將再次出現。 我知道我可以解開onmouseenter事件，但是一旦我開出菜單，進入圖標，我的菜單就會關閉，我不想要那樣。

我能想到的最簡單的例子： http ： //jsfiddle.net/tzzqM/5/

題
如何在點擊事件上打開“菜單”，然后只要有人將鼠標懸停在菜單或“圖標”（兩者都有）上，就可以保持打開狀態。 一旦鼠標離開兩者的區域，菜單關閉，並打開它我需要再次單擊“圖標”。 還有另一種方法嗎？

Answer 1

鼠標離開對象時，檢查鼠標是否仍在菜單上或菜單按鈕上，如果沒有，則隱藏菜單。 基本上，您將事件mouseleave綁定到兩個元素，然后檢查選擇的長度。 如果它是1，你要么在菜單上，要么在按鈕上，這使得退出菜單按鈕進入菜單本身，而不是觸發代碼的“隱藏”部分，如果選擇長度為0，那么我們還沒有結束任何這些元素，我們隱藏它。

$("#icon").click(function() {
    $("#invis").css("display", "block");
        $("#invis,#icon").bind("mouseleave", function(){
            if($("#invis:hover,#icon:hover").length === 0){
                $("#invis").css('display', "none");
            }
        })
});​

有一個小提琴在這里 。

或者，如果我必須從頭開始（只是jQuery部分），我會寫它的方式，因為記住你會更少次跳進DOM池並且應該更有效率，盡管它的功能與第一。 這是小提琴

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(){
            if($("#icon:hover,#invis:hover").length < 1) menu.hide();
        });
});​

或者使用jhummel的建議，我們可以訪問具有懸停的新視圖的ID，並檢查它是否是我們要監視的兩個中的一個。 這很棒，因為它阻止我們再次跳入游泳池，這給我們帶來了邊際性能提升，這是小提琴 。

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(e){
            if($.inArray(e.relatedTarget.id, ["icon","invis"]) === -1){
                   menu.hide();
            }
        });
});​

---

相關文檔：

• jQuery.merge
• 別再跳進游泳池！
• jQuery.inArray
• event.relatedTarget

Answer 2

當您使用mouseover或mouseleave事件時，jQuery中的事件對象將具有relatedTarget屬性。 您可以檢查該屬性以查看鼠標是否正在進入另一個元素。

$("#icon").on('click',function() {
  $("#invis").show();
}).on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'invis') $('#invis').hide();    
});

$('#invis').on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'icon') $(this).hide();
});

jquery relatedTarget docs