javascript event inheritance

Question

私はリストを使用して、簡単なナビゲーションメニューを構築しています。私は、タグがホバリングされたときにメニュー（ul）を表示し、div全体からマウスを離したときにだけ消えるようにします。しかし、以下のコードは、divタグだけでなく、すべてのタグが削除されたときにmouseoutに当たっています。私は各子タグがイベントを継承していると仮定しますが、どうすれば回避できますか？

<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

マウスオーバー/アウトイベントはちょっと変わった動作をする可能性があり、最悪の部分はすべてブラウザによって異なるということです。私がお勧めするのは、jQueryなどのJavaScriptフレームワークを使用することです。このフレームワークでは、ブラウザ間での処理がmouseoverおよびmouseoutです。さらに、mouseenterとmouseleaveがあります。これは、子要素がある場合でも、要素のマウスの1回の出入りに1回のみトリガーする特別なイベントです。

demo of mouseenter/mouseleave events in jQueryを参照してください。