Eventos de MouseOver e Mouseout disparando em crianças

Question

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

Se eu mouseover o Navigation a Drop_Down A divisão desliza para baixo e, se eu mouse, ele desliza.

O problema é se eu mouse para a criança Drop_Down div, também desliza.

Alguém sabe como posso consertar isso?

Answer 1

Use o mouseenter e mouseleave eventos em vez disso Novo no protótipo 1.6.1 (mas não novo no IE). Você precisa mover seus manipuladores de eventos em linha para fora da sua marcação para fazer isso:

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

E configure os eventos no 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>

Diferente mouseover e mouseout, esses eventos não borbulham dos elementos filhos. Eles são disparados com o elemento exato ao qual você os vincula, resolvendo seu problema.

Answer 2

Como uma resposta alternativa, genérica (não específica de protótipo)

Isso é causado pela borbulha do evento. Mais informações, incluindo como cancelá -las em nós filhos, aqui:http://www.quirksmode.org/js/events_order.html