How do I stop events from bubbling/multiple events with animated mouseovers?
Posted
by Kurucu
on Stack Overflow
See other posts from Stack Overflow
or by Kurucu
Published on 2010-05-31T13:20:45Z
Indexed on
2010/05/31
13:23 UTC
Read the original article
Hit count: 166
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 nast global variable that determines whether effects are in action, and thus ignore the event?
© Stack Overflow or respective owner