javascript事件继承

Question

我使用列表来构建一个简单的导航菜单，该菜单显示当您离开它时悬停和隐藏。我希望菜单（ul）在a标签悬停时出现，并且只在将整个div移出时才会消失。但是，当每个标签被剔除时，下面的代码会触及mouseout，而不仅仅是div标签。我假设每个子标签都继承了该事件，但我该如何解决这个问题？

<div id="Div1" onmouseout="alert('out')"> 
    <div id="header"> 
     <a href="#" onmouseover="alert('over')">Show Others</a> 
    </div> 
    <ul id="menu"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
</div> 

Answer 1

鼠标悬停/跳出事件可能会有点奇怪，最糟糕的部分是它在不同浏览器之间有所不同。我建议你做的是使用一个JavaScript框架，如jQuery，它具有跨浏览器处理mouseover和mouseout。更好的是，它有mouseenter和mouseleave，它们是特殊事件，即使它具有子元素，每次鼠标进入/离开元素时也只能触发一次。

请参阅demo of mouseenter/mouseleave events in jQuery。