événement Arrêter bouillonnant en Javascript

Question

J'ai une structure html comme:

<div onmouseover="enable_dropdown(1);" onmouseout="disable_dropdown(1);"> 

      My Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

      <hr /> 

      Featured Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

</div> 

Je veux l'événement onmouseout se déclenche uniquement à partir de la principale div, pas les balises « a » ou « ul » ou « li » dans la div!

Ma fonction onmouseout est la suivante:

function disable_dropdown(d) 
{ 
    document.getElementById(d).style.visibility = "hidden"; 
} 

Quelqu'un peut-il s'il vous plaît me dire comment je peux arrêter l'événement de bouillonnement? J'ai essayé les solutions (stopPropogation etc) fournies sur d'autres sites, mais je ne sais pas comment les implémenter dans ce contexte.

Toute aide sera appréciée.

Merci beaucoup!

Answer 1

Les événements que vous voulez vraiment utiliser sont onmouseenter and onmouseleave, mais ils ne sont pas implémentés dans tous les navigateurs. Vous pourriez chercher à les implémenter vous-même, mais vous seriez dans ce cas mieux d'utiliser une bibliothèque qui a déjà résolu le problème cross browser pour vous. Ainsi, dans jQuery

<div id="main"> 

      My Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

      <hr /> 

      Featured Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('#main').hover(function() { enable_dropdown(1); }, // mouseenter 
         function() { disable_dropdown(1); }); // mouseleave 
</script>