Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mouseover and mouseout events firing on children

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?

like image 508
Abadon Avatar asked Oct 30 '09 18:10

Abadon


2 Answers

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.

like image 99
Crescent Fresh Avatar answered Sep 22 '22 04:09

Crescent Fresh


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

like image 41
DOOManiac Avatar answered Sep 21 '22 04:09

DOOManiac