mouseover e mouseOut eventi che sparano sui bambini

Question

Il codice:

<div id="Navigation" 
    onmouseover="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" 
    onmouseout="new Effect.toggle('Drop_Down','slide',{duration: 0.8});"> 
    <div id="Drop_Down"> 
     <% include Navigation %> 
    </div> 
</div> 

Se mouseOver il div Navigation il Drop_Down scivola verso il basso, e se io mouseOut che scorre verso l'alto.

Il problema è che se passaggio il mouse sul figlio Drop_Down div, si apre anche.

Qualcuno sa come posso risolvere il problema?

Answer 1

Utilizzare i mouseenter e mouseleave eventi invece new in Prototype 1.6.1 (ma non nuova in IE). Dovete spostare i gestori di eventi in linea dal vostro markup per fare questo:

<div id="Navigation"> 
    <div id="Drop_Down"> 
     <% include Navigation %> 
    </div> 
</div> 

e la configurazione degli eventi nello script:

<script> 
document.observe('dom:loaded', function() { 
    $('Navigation') 
     .observe('mouseenter', function() { 
      new Effect.toggle('Drop_Down','slide',{duration: 0.8}) 
     }) 
     .observe('mouseleave', function() { 
      new Effect.toggle('Drop_Down','slide',{duration: 0.8}) 
     }) 
}) 
</script> 

differenza mouseover e mouseout, questi eventi non bolla da elementi figlio . Sono sparati sull'esatto elemento a cui li legano, risolvendo bene il problema.

Answer 2

Come alternativa, generico (non prototipo-specifico) risponde

Ciò è causato dal ribollimento evento. Maggiori informazioni, incluso come annullarlo nei nodi figli, qui: http://www.quirksmode.org/js/events_order.html