Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

place your ad here

Web Premium



Get Qwest High Speed Internet



The difference between rollOver and mouseOver

December 3rd, 2008 . by polygeek

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.

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

17 Responses to “The difference between rollOver and mouseOver”


comment number 1 by: Daniel

Another important difference is that the mouseOver event bubbles up the displaylist, but the rollOver event doesn't.


comment number 3 by: polyGeek

@Daniel, good to know. Thanks.

By the way, wicked cool website of yours: TimeToast.com. I signed up.

comment number 4 by: Evan Mullins

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?

comment number 5 by: roddyb

Thank you for posting. This flickering effect drove me mad, but now it's gone !

comment number 6 by: shan

Thanks so much. You saved my day.


[...] has a nice comparison between the 2 (http://polygeek.com/1519_flex_the-difference-between-rollover-and-mouseover), where I discovered neither the mouseOver nor the rollOver event was being fired. Viewing the same [...]

comment number 8 by: adodo

ok broder, now i know what's d'difference between them..

thanks ya!

visit my blog, just sightseeing hahaa :D

comment number 9 by: adodo

ok broder, now i know what's d'difference between them..

thanks ya!

visit my blog, just sightseeing hahaa :D

comment number 10 by: asd

dsadsad sadsadsaddsadasdssa sadsadsadsadasd asd


[...] a link to the homepage – and who make this obvious by changing the image on mouseover / rollover (difference explained here). There are some tips on how to do it yourself at the [...]

comment number 12 by: David Frank

Simple explanation, yet fantastic!

comment number 13 by: arpit

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

comment number 14 by: polygeek

@arpit, thanks for that note.

comment number 15 by: rollOver?mouseOver???

comment number 16 by: Mark

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

comment number 17 by: polygeek

@Mark Shouldn’t be much different. The s:BorderContainer broadcasts all the standard mouse events.

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud