javascript - ejemplo - eventos mouseover y mouseout disparar a los niños

onchange javascript ejemplo

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 Drop_Down el Drop_Down la Navigation el Drop_Down desliza hacia abajo y, si lo hago, se desliza hacia arriba.

El problema es que si Drop_Down el Drop_Down sobre el Drop_Down secundario Drop_Down div también se desliza hacia arriba.

¿Alguien sabe cómo puedo arreglar eso?

Answer 1

Como respuesta alternativa, genérica (no específica del prototipo)

Esto es causado por Event Bubbling. Más información, incluida la forma de cancelarla en nodos secundarios, aquí: http://www.quirksmode.org/js/events_order.html

Answer 2

Utilice el mouseenter y el mouseenter para mouseleave eventos en lugar de nuevos en el prototipo 1.6.1 (pero no nuevos en IE). Tienes que mover los manejadores de eventos en línea de tu marcado para hacer esto:

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

Y configura los eventos en 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>

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