This was a question that has been in my head for a long time: what is the difference between MouseEvent.ROLL_OVER and MouseEvent.MOUSE_OVER. I have been using MouseEvent.MOUSE_OVER for all my rollOvers up to now without really thinking about it, but I think it would be interesting to know the difference for something so basic.
If you look at the documentation that comes with Flash CS3. You will find very little help. There are no examples explaining the difference between the two. The only difference you will find there is that the MOUSE_OVER event has the bubbles property set to true and the ROLL_OVER to false. I don’t know how much that property impacts on the behavior of the event, but I am keeping event bubbling for another post (I have been postponing that post for a long time).
Where I found there was a difference between the two events is in the way they handle children of the display object you added the listener too. I have made a simple example to show this:
In that flash example, be sure to roll over the blue part of the button to really see the difference(note that the blue rectangle is inside the black rectangle movieClip, not just over). In the MOUSE_OVER example, the event is fired for every children of the display object that the listener was added to. This does not happen with the ROLL_OVER event. If you move your mouse from the exterior of the button to the blue part MOUSE_OVER will generate 3 times the events that ROLL_OVER will. One way to make MOUSE_OVER act as ROLL_OVER is to set mouseChildren = false but as a consequences: the first is that it will disable all mouse events from children which I think might help the CPU but at the same time you won’t be able to interact with the children with the mouse.
In our previous example, it didn’t really matter how many events where fired because we used a tween to do the rollover and we weren’t able to see the difference visually, but there might be times where you will want all the different events. Like if you want the mouse cursor to change when over a movieClip and still want rollOver effects from children of that movieClip, you would use the MouseEvent.ROLL_OVER to change the mouse cursor and MouseEvent.MOUSE_OVER for the children movieClips rollOver effects.
As a side note on cpu efficiency, it doesn’t really matter if you listen to MouseEvent.ROLL_OVER or MouseEvent.MOUSE_OVER events, they are both as efficient. What will save you cpu cycles is if you disable the children of a movieClip from sending events if you don’t need them (even if you don’t listen to them events are still fired) using mouseChildren = false.
I hope this shed some light on the subject.
#1 by ask - June 24th, 2008 at 11:20
Yep, you just saved me a few hours work for sure. Clear explanation and nice examples. Cheers very much. And good look with the event bubbling post. Ask.
#2 by Janosch - June 30th, 2008 at 10:17
thanks!
#3 by Gary - June 30th, 2008 at 18:30
Nice! thanks for the explanation, now send it to Adobe for their, seriously lacking, docs.
#4 by Ronald - July 29th, 2008 at 03:17
Ok cool, I was wondering about this.
btw, lol @ gary
#5 by Bruce - August 14th, 2008 at 09:06
Agrrr, finally somebody explains this. Thanks you saved the day.
#6 by TePig - September 17th, 2008 at 22:28
It’s a cool and great example !
#7 by Paul - September 30th, 2008 at 07:01
If only I’d found this post earlier, I wouldn’t have spent the morning banging my head trying to fix an issue related to using MouseEvent.MOUSE_OUT – I was even doing weird stuff with getRect( this ).containsPoint( ) etc. to try and get around it!
Changed it all to ROLL_OVER/ROLL_OUT and it works first time!
Anyway, thanks for the post and examples. You may have just saved my productivity for today
#8 by Howie - October 22nd, 2008 at 09:57
Great example. I was in the same boat as Paul and headed down that same path. Whew! You just saved me. Thanks.
#9 by kj - November 12th, 2008 at 11:51
brilliant!
that helps alot!!
#10 by Candy - December 10th, 2008 at 01:27
great help, thanks.
#11 by joan.mmk - January 1st, 2009 at 22:35
Nice! I’ve got the same question. Thanks.
#12 by cakeasaurus - January 11th, 2009 at 19:20
good explanation. i was having this problem for a while, i had no idea why the mouse_over and mouse_out were firing twice.. turned out it was happening for each of the children display objects.
#13 by J - February 8th, 2009 at 12:29
these nifty little helpers.. thanks a lot for sharing!
#14 by Tom - February 17th, 2009 at 18:08
THANKS so much for this explanation, right now I am working on a project where I need extactly this!!!
THANX AGAIN!
#15 by Bill - March 17th, 2009 at 14:03
You saved me a day of work with this. Thank you, thank you, thank you!
#16 by Chris - March 26th, 2009 at 06:28
I’m having a possibly related issue… I’ve got an event listener on a container for MouseEvent.ROLL_OVER… the container has several children, some of which I have set mouseEnabled = false, because I don’t want the rollover to pick them up… but it still sees them as part of the main container and fires off the event whenever I roll over them. Any thoughts?
#17 by zedia.net - March 27th, 2009 at 16:49
@Chris
Ya I was having a similar issue this week. The trouble is that even if a children is set to mouseEnabled = false, it still counts in the boundaries of the parent; it will just not send events…
You will have to find another way around this.Mostly by putting these troublesome children in another holder DisplayObject with mouseEnabled= false also.
#18 by Matt - April 16th, 2009 at 03:14
@Chris
Or you could make use of the hitArea property of the MovieClip/Sprite, by not putting the troublesome children into the clip you use for the hitArea
#19 by Ian - April 20th, 2009 at 14:44
Great demonstration! I wonder why Adobe didn’t see fit to clarify this in the documentation?
#20 by Simon - April 23rd, 2009 at 15:23
THANK YOU SO MUCH! you just saved me so much trouble.
#21 by AMITKUMARDUBEY - June 3rd, 2009 at 04:49
Really great explanation………….
With proper example.
Please send this to adobe for their correction in Explanation.
#22 by pez - July 2nd, 2009 at 18:03
awesome man i waved the mouse over the examples a few times and instantly understood what people had explained in much less clear terms on forums
#23 by Lasse Hall - July 14th, 2009 at 15:50
well what can I say. I used to be Gandalf with AS2 OOP, pumping out games and witty toys, riding on the wave and for years I didnt have to think about the machine, my OOP-toolbox rocked – but with AS3 there are so many small secrets, can hardly take a step without stumble on some silly thing that could have been explained/documented. I spend more time digging my nose deep into wonderful webpages like this just to get an idea of what is going on. “Why doesn’t the machine obey my orders : ) as it used to.”
(an interesting fact, considering the neat sum I have been handing out to the Adobe/Macromedia empire for the past 15 years. A nice old fashioned user manual. Wouldn’t that be something to expect??? )
I love you guys – eager as beavers : ()
#24 by zedia.net - July 14th, 2009 at 16:02
@Lasse Hall
AS2 had a few well hidden secrets to. If you have been doing OOP than you must have used Delegates that is not that straightforward to use.
AS3 has its quirks but it’s really more powerfull when you get used to it. No more searching 3 hours for the bug that makes your application fail silently.
#25 by Lasse Hall - July 14th, 2009 at 18:52
: () oh AS2 sure was a big risky swamp. Of course AS3 is better in the long run, but it’s so damn lexical. It’s like opening a Bible where you have to remember every parapgraph, I prefer a more dynamic – LEGO-style method where I can build what I need with a handful of nuts and bolts, so to speak.
You see I had proof tools developed for all the strange business that was going on in AS2, so they we’re not a problem. So I could concentrate on the creative part.
I just miss the free spirit of it : )
cheers!!!
But as I said – pages like this makes it a little easier.
#26 by Glass - July 16th, 2009 at 13:59
Thanks! It’s exactly what I needed!
#27 by Joel - August 25th, 2009 at 21:35
thanks for this! great, easy to understand example!
#28 by Renzo - October 11th, 2009 at 01:10
This page was the first result on my search for this very question. Thanks, and a very nice job with the sample.
#29 by April - October 19th, 2009 at 12:53
Thanks! Very concise, clear example.
#30 by Varun - October 20th, 2009 at 03:59
That was what i needed. thanks a ton
#31 by Bjørn - November 4th, 2009 at 08:46
Thansk for the tip, you saved my day…
#32 by blindgoat - April 12th, 2010 at 13:58
Wonderful – Thanks for the great explanations and clear examples. A little research today solved me a lot of troubles had I tried to figure this out by experimenting
#33 by am - May 25th, 2010 at 13:09
Thx, good explanation
very helpful
#34 by Josh - July 3rd, 2010 at 16:03
It all really has to do with the bubbling property!
Whenever you move a mouse over a DisplayObject Container, Flash will automatically dispatch both MOUSE_OVER and ROLL_OVER type MouseEvent events.
If an event bubbles (as it does when the Mouse_Over type of MouseEvent is dispatched) then any listener registered on a DisplayObjectContainer (including the stage, itself) listening for the MOUSE_OVER event will ‘hear’ the mouse moving over the DisplayObjectContainer AND also ‘hear’ any children of that container.
Whereas the ROLL_OVER type of MouseEvent is dispatched without bubbling. That means if a listener is registered on a DisplayObjectContainer, it will only ‘hear’ the Mouse moving over the DisplayObjectContainer, with which it is registered.
Note that the children are still dispatching the ROLL_OVER type MouseEvent when they are moused over, it’s just that their ‘voices’ don’t bubble up through the parent container to be ‘heard’ by the listener.
Setting the mouseChildren property to false, basically cuts off all outside communication with a container’s children.
Whereas, choosing a ROLL_OVER event instead of a MOUSE_OVER event is more precise because you are telling flash that there can still be outside communication with the children – just not for when the mouse rolls over them.
Hopefully sheds a little more light on the subject.
Good luck,
Josh
#35 by Tobias - July 27th, 2010 at 14:15
Great, thank you!