mouseover and mouseout events firing on children

Question

The code:

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

If I mouseover the Navigation the Drop_Down div slides down, and if I mouseout it slides up.

The problem is if I mouseover the child Drop_Down div it also slides up.

Does anyone know how I can fix that?

Signalman

Answer 1

Use the mouseenter and mouseleave events instead new in Prototype 1.6.1 (but not new in IE). You have to move your inline event handlers out of your markup to do this:

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

And setup the events in 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>

Unlike mouseover and mouseout, these events do not bubble from child elements. They are fired on the exact element you bind them to, solving your issue nicely.

Er

so it works, thank you. i would vote your answer but i have less then 15 reputations... greets chris – Signalman

Answer 2

As an alternate, generic (not Prototype-specific) answer

This is caused by Event Bubbling. More info, including how to cancel it in child nodes, here: http://www.quirksmode.org/js/events_order.html

Fiord