eventi mouseover e mouseout che sparano ai 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 passo il mouse sopra il Navigation il div Drop_Down scorre verso il basso, e se lo topo scorre verso l'alto.

Il problema è che se passo il mouse sopra il div Drop_Down anche il cursore scivola verso l'alto.

Qualcuno sa come posso risolverlo?

Answer 1

Utilizza il mouseenter e mouseleave invece nuovo in Prototipo 1.6.1 (ma non nuovo in IE). Per fare ciò devi spostare i gestori di eventi inline dal markup:

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

E imposta gli 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>

A differenza di mouseover e mouseout , questi eventi non generano elementi figlio. Vengono attivati ??sull'elemento esatto a cui li vincoli, risolvendo il problema in modo corretto.

Answer 2

Come risposta alternativa, generica (non specifica del prototipo)

Ciò è causato dal gorgoglio degli eventi. Ulteriori informazioni, incluso come annullarlo nei nodi figlio, qui: http://www.quirksmode.org/js/events_order.html