Ever wonder what the difference is between rollOver and rollOut vs mouseOver and mouseOut? Well, I didn’t. Honestly, I never really gave it any thought. I got used to using the mouseOver/mouseOut and didn’t think about it again. Until, I had a problem that could only be solved by using the rollOver/rollOut events.
Move your mouse over the two <Panels> below. The panel on the left is using the roll events to change the style. Notice that the panel style doesn’t change as you move over the Button. However, the panel on the right is using the mouse events and it flickers when the mouse moves over the edge of the Button. That’s because the mouseOut event fires and then the mouseOver event fires again.
| view source |
The basic difference is that rollOut checks to see if the mouse is over the component that is listening for the event or a child of the component. mouseOut doesn’t do that so it fires causing the style to change before it can be corrected by mouseOver firing again.
Another important difference is that the mouseOver event bubbles up the displaylist, but the rollOver event doesn't.
@Daniel, good to know. Thanks.
By the way, wicked cool website of yours: TimeToast.com. I signed up.
Thanks for that! I have wondered the difference between the two, but only passively. Never took the few minutes to do an experiment such as this. I've learned something today, I guess I'm done now, eh?
Thank you for posting. This flickering effect drove me mad, but now it's gone !
Thanks so much. You saved my day.
ok broder, now i know what's d'difference between them..
thanks ya!
visit my blog, just sightseeing hahaa :D
ok broder, now i know what's d'difference between them..
thanks ya!
visit my blog, just sightseeing hahaa :D
dsadsad sadsadsaddsadasdssa sadsadsadsadasd asd
Simple explanation, yet fantastic!
A subpoint here: If your rollOver event listener is attached with the useCapture flag set to true, even the rollover event fires multiple times as the mouse moves between the children
@arpit, thanks for that note.
Hi Dan,
Thanks for all of your great posts. I am an old guy (52) trying to learn this stuff (both Flex, specifically, and programming, generally) for the first time, so please beware any lack of understanding in my question.
I am using the Flash Builder 4 trial, so the framework and/or component model has changed somewhat since your post on this subject. I am trying to figure out how to:
1. adapt it to the new framework, and
2. apply this concept to other containers (e.g., a spark BorderContainer)
I haven't yet figured out how to do this and am wondering if you have any suggestions?
many thanks in advance,
Mark
@Mark Shouldn’t be much different. The s:BorderContainer broadcasts all the standard mouse events.
thanks for the info… helped a lot!
Great post!
It helped me figure out a problem that I had been working on for an hour or so… I was getting similar flicker to what you show in your demo, but even worse, because my containing component had lots of child components…. I started heading down the route of a complicated workaround until I read this post. Using rollout/rollover was simple and did the trick.
Just one word for all the questions: mouseOver event bubbles up , but the rollOver event doesn’t. You see, so if you add event listener with useCapture false, then i can only listen 2 phases: target and bubble. And b/c rollOver event doesn’t bubble up, so you can only listen the event during target phase.
@bamboo Good to know. Thanks.