为什么mouseleave触发

我想开发自己的手风琴/滑动菜单。（作为一个侧面的问题，任何可以很容易地定制/皮肤的好问题？）为什么mouseleave触发

我发现，当我滑下“内部”菜单时，似乎会触发。由于它是“内在”，我的鼠标肯定没有离开#mainnav。

我的测试页here

没有恼人警报测试here

$("#mainnav").mouseleave(function() { 
    alert("mouseleave #mainnav"); 
});

更完整的源：

$(function() { 
    $("#mainnav > li > a").hover(mouseOver); 
    $("#mainnav").mouseleave(function() { 
     alert("mouseleave #mainnav"); 
    }); 
}); 
function mouseOver() { 
    $(this).next("ul").slideDown("fast", function() { 
     $("li:has(ul) > a", this).hover(mouseOver); 
    }); 
}

 
#mainnav, #mainnav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    background: #bbb; 
} 
#mainnav ul { 
    display: none; 
    margin: 5px 10px; 
} 
#mainnav a { 
    display: block; 
    padding: 5px 10px; 
    margin: 2px 0; 
    background: yellow; 
}

<ul id="mainnav"> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 
    <li> 
     <a href="#">Test</a> 
     <ul> 
      <li><a href="#">Test</a></li> 
      <li> 
       <a href="#">Test 1</a> 
       <ul> 
        <li><a href="#">Test</a></li> 
        <li><a href="#">Test</a></li> 
        <li><a href="#">Test</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Test</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Test</a></li> 
    <li><a href="#">Test</a></li> 
</ul>

来源

2009-07-26 iceangel89

也许它与事件传播离子？也许你需要停止传播？ – 2009-07-26 13:22:55

我在想，选择器有些奇怪，这似乎是正确的寿，也许是因为利润率导致这... stopPropagation哪里/何时？为什么你说因为传播而死？ – iceangel89 2009-07-26 13:46:48

@ iceangel89在你的问题提供的链接不工作，你可以创建一个JSFiddle或分享任何链接到您的网站？ – 2013-09-15 03:11:07

jQuery UI accordion使用由ThemeRoller生成的CSS。您甚至可以进一步自定义ThemeRoller生成的CSS。

至于你的问题，我怀疑这是jQuery模拟事件（它是微软专有的）的问题。 jQuery网站上的示例使用DIV和段落，它看起来像广告一样工作。您可能想要尝试停止“悬停”事件的传播，以查看是否阻止子级上的鼠标在父级上触发mouseleave。

编辑：我只注意到你的悬停方法只有一个回调。我相信它需要两个，你需要停止在两个传播。以下似乎是做的伎俩，但使其工作（因为离开两端的锚点有事件块），我不得不将整个东西包裹在一个填充5的DIV中，并将mouseleave事件附加到它。

$(function() { 
    $("#mainnav > li > a").hover(
     mouseOver, 
     mouseOut 
    ); 
    $("#navContainer").mouseleave(function() { 
     alert("mouseleave #mainnav"); 
    }); 
}); 

function mouseOver(e) { 
    $(this).next("ul").slideDown("fast", function() { 
     $("li:has(ul) > a", this).hover(mouseOver, mouseOut); 
    }); 
    e.stopPropagation(); 
} 
function mouseOut(e) { 
    e.stopPropagation(); 
} 

<div id="navContainer" style="padding: 5;"> 
    ... your list ... 
</div>

来源

2009-07-26 13:08:07 tvanfosson

哦“你可能想尝试停止”悬停“事件的传播，以查看是否阻止孩子在父母上触发mouseleave的鼠标移出”......也许我会研究这一点。 – iceangel89 2009-07-26 13:48:12

我该怎么做寿？ – iceangel89 2009-07-26 13:53:03

没有一个JQuery手风琴/滑动菜单/任何不容易皮肤和定制的东西。他们都使用CSS。

来源

2009-07-26 13:08:21 Sneakyness

您似乎已经找到了一种可靠的方法来使Google Chrome崩溃。奇怪的。

也许你还需要选择所有的子元素。

$("#mainnav, #mainnav > *").mouseleave(function() { 
    alert("mouseleave #mainnav"); 
});

来源

2009-07-26 13:20:24 zacharyliu

-2

使用Web Inspector。 Safari有一个，Firefox有萤火虫。抓住其中的一个，你会注意到，只要你输入一个列表项，它就会发生。您将离开mainnav。我不认为你了解Box Model和JQuery事件系统的工作方式。 Here's a good resource on Box Model（请按照他提到的链接阅读所有这些内容，但必须先理解这一点，然后才能理解您的问题）。 Here is the events/mouseleave page in JQuery's documentation.如果你很久以前就读过这个内容，你就不会在这里问这个问题。他们甚至为你放胆。他们的文档非常好。

鼠标移开火灾时，指针移入或移出从子元素，而鼠标离开没有。

我不会为你写代码，你需要自己学习这些东西。这是JQuery/CSS的重要组成部分，如果您打算编写自己的脚本，则无法跳过这一部分。

来源

2009-07-26 14:30:32 Sneakyness

老帖子，我知道，但对于未来的用户：测试页没有loger现场:( 但我认为这是因为监听鼠标离开元素移动自的mouseenter指针下方，离开自己

如果是这种情况，在进入和离开事件时（但在动画/效果发生之前）测量指向mouseenter-ed元素的指针的距离时，可以判断鼠标是“接近”还是“留下“元素，这样，在触发”mouseleave“效果/动作/函数之前，您可以”等待“一秒钟。

来源

2012-02-09 05:47:32 sergio

为什么mouseleave触发

回答

相关问题