简介:
大家好。我正在尝试做一个菜单，但我遇到了 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");
});
});
到目前为止，我试过了。我的意思是点击“图标”，这个点击会显示一个菜单/另一个隐藏的元素。现在我想一直保持打开状态，因为有人将鼠标悬停在“图标”或实际菜单上。但是使用我提供的代码，一旦我离开鼠标然后再次输入“图标”，它仍然保持 onmouseenter 事件，并且菜单将再次出现。我知道我可以取消绑定(bind) onmouseenter 事件，但是一旦我离开菜单，进入图标，我的菜单就会关闭，我不希望这样。
我能想到的最简单的例子:http://jsfiddle.net/tzzqM/5/
问题
如何在单击事件时打开“菜单”，然后只要有人将鼠标悬停在菜单或“图标”(两者)上就保持打开状态。一旦鼠标离开两者的区域，菜单将关闭，要打开它，我需要再次单击“图标”。
还有其他方法吗？
最佳答案
鼠标离开对象时，检查鼠标是否仍在菜单上或菜单按钮上，如果没有，则隐藏菜单。基本上，您将事件 mouseleave 绑定(bind)到两个元素，然后检查选择的长度。如果它是 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");
}
})
});
有一把 fiddle 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 的建议，我们可以访问具有悬停的新 View 的 ID，并检查它是否是我们要监视的两个 View 之一。这很棒，因为它阻止我们再次跳入池中，这给了我们一个边际性能提升，这里是 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();
}
});
});
相关文档:
关于javascript - 带有 mouseenter 和 mouseleave 事件的菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13781053/