javascript, héritage de l'événement

Question

J'utilise une liste pour créer un menu de navigation simple, qui s'affiche lorsque vous passez la souris et que vous le cachez lorsque vous le quittez. Je veux que le menu (ul) apparaisse lorsque la balise a est survolée, et ne disparaisse que lorsque l'on sort de la div toute la souris. Cependant, le code ci-dessous frappe le mouseout lorsque chaque balise est déplacée, pas seulement la balise div. Je suppose que chaque étiquette enfant hérite de l'événement, mais comment puis-je contourner cela?

<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

Les événements over/out de la souris peuvent agir un peu bizarrement, et le pire dans tout cela est qu'il varie d'un navigateur à l'autre. Ce que je vous recommande de faire est d'utiliser un framework JavaScript tel que jQuery, qui a la gestion multi-navigateur de mouseover et mouseout. Encore mieux, il a mouseenter et mouseleave, qui sont des événements spéciaux qui sont sûrs de se déclencher seulement une fois par souris entrant/sortant d'un élément, même s'il a des éléments enfants.

Voir demo of mouseenter/mouseleave events in jQuery.