How do I stop events from bubbling/multiple events with animated mouseovers?

Question

I noticed a lot of JQuery answers on this, but I'm using MooTools...

I have a Table of Contents which uses CSS Fixed positioning to keep it off to the left side, except for 20 pixels. The user hovers their cursor over the 20 pixels, which fires the DIV's mouseover event and the ToC slides fully into the page. When the cursor leaves, the ToC slides back to where it was.

$('frameworkBreakdown').addEvents({
    'mouseover': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', 20);
        event.stop;
    },
    'mouseout': function(event){
        event = new Event(event);
        $('frameworkBreakdown').tween('left', (10 - $('frameworkBreakdown').getStyle('width').toInt()) );
        event.stop;
    }
});

This works well (aside from unrelated issues) except that when I move the mouse on the DIV it starts to jitter, presumably because the contents of the DIV are also firing the event, or the event refires as the mouse tracks over the DIV.

How can I stop this behaviour from occuring? Is there a standard method, or do I use some sort of nasty global variable that determines whether effects are in action, and thus ignore the event?

Answer 1

Use mouseenter/mouseleave instead of mouseover/mouseout.

Also, you shouldn't be doing this in MooTools 1.2+:

event = new Event(event);
event.stop;

A simple event.stop() will suffice.