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");
            }
        })
});

有一个小提琴here。

或者如果我必须从头开始（只是jQuery部分）我会写它的方式，因为记住你会跳进DOM池的次数较少而应该有点更高效，虽然它与第一个一样有用。这是fiddle

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，并检查它是否是我们要监控的两个中的一个。这很好，因为它阻止我们再次跳入池中，这给我们带来了边际性能提升，这是fiddle。

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();
            }
        });
});

<小时/> 相关文档：

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

菜单包含mouseenter＆amp; mouseleave事件

2 个答案: