javascript - 如何防止 onmouseover 事件为其父级激活 onmouseout 事件？

Question

我正在尝试创建一个简单的菜单，该菜单在用户将鼠标悬停在顶部栏上的按钮上时启动。菜单显示在容器 div 中（使用 onmouseover 事件激活块显示）。但是，当用户将鼠标悬停在容器内的菜单项列表上时，div 就会消失。HTML结构如下：

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

就我的想法而言，我认为这是因为当鼠标触摸“lvl1”（或 lvl2 或 lvl3）id 时，它会退出“menu-container”div。我试图将它嵌套在另一个 div 中，但也没有工作。

理想情况下，HTML 结构应如下所示：

<div id="menu-contaier" onmouseout="hideMenu();">
        <div id="lvl1"><ul><li onmouseover="presentForLevel2(3, 'lvl2');">Windows</li><li onmouseover="presentForLevel2(4, 'lvl2');">Tables</li></ul></div>
        <div id="lvl2"></div>
        <div id="lvl3"></div>
</div>

悬停时，“presentForLevel2()”函数将填充不会发生的 lvl2 div。

Answer 1

发生这种情况是因为当您将鼠标移出任何 'lvl' div 时，mouseout 事件会冒泡并且也会在父 div 上触发。为防止这种情况，请在子 div 上设置 mouseout 事件处理程序并阻止事件冒泡。这是一个演示：http: //jsfiddle.net/ESBYw/