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。