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

我正尝试创建一个简单的菜单，当用户将鼠标悬停在顶部栏上的按钮上时启动。菜单显示在容器div内（使用onmouseover事件激活块显示）。但是，当用户将鼠标悬停在容器内的菜单项列表上时，div将消失。 HTML结构是这样的：如何防止onmouseover事件为其父级激活onmouseout事件？

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

至于我的思绪，我觉得这是因为当鼠标按下“LVL1”（或LVL2或LVL3）ID，它走出去“菜单集装箱” 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这不会发生。

来源

2012-08-12 Vaibhav Kaushal

-1

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

来源

2012-08-12 09:57:43 Abraham

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

回答

相关问题