如何防止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事件？

回答

相關問題