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?

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.

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