eventos mouseover y mouseout disparando contra los niños

Question

el código:

<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> 

Si mouseover el div Navigation la Drop_Down se desliza hacia abajo, y si mouseOut se desliza hacia arriba.

El problema es si me mouseover el niño Drop_Down div también se desliza hacia arriba.

¿Alguien sabe cómo puedo arreglar eso?

Answer 1

Use los mouseenter y mouseleave eventos en lugar new in Prototype 1.6.1 (pero no es nuevo en IE). Tienes que mover los controladores de eventos en línea fuera de su margen de beneficio de hacer esto:

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

y la configuración de los eventos en la escritura:

<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> 

A diferencia mouseover y mouseout, estos eventos no hacer burbujas de elementos secundarios . Son despedidos del elemento exacto al que los vincula, y resuelven su problema muy bien.

Answer 2

Como una alternativa, genérico (no Prototype-específico) responder

Esto es causado por la propagación de eventos. Más información, incluyendo cómo cancelarla en nodos secundarios, aquí: http://www.quirksmode.org/js/events_order.html