Flash AS3: How to prevent MouseEvent.MOUSE_OUT when you mouse_over a child sprite

All,

Here's my situation...

The UI of my Flash application is a grid. Each row of the grid is a sprite that contains a number of child sprites (UI controls) that respond to mouse events开发者_高级运维

Each row of the grid should have a hover effect - i.e., when you hover over the row, the row's background should change color.

This is accomplished easily:

rowSprite.addEventListener(MouseEvent.MOUSE_OVER, highlightRow, false, 0, true);
rowSprite.addEventListener(MouseEvent.MOUSE_OUT, unhighlightRow, false, 0, true);

This works fine, EXCEPT that when the user rolls over any of the row's child sprites, the row's MOUSE_OUT event is fired, and the row is "unhighlighted". This isn't what I want.

In other words - I'd like the row to be unhighlighted only when you roll OUTSIDE of the row, not when you roll over a child sprite within the row.

A possible solution: in the unhighlightRow function, test whether the user's mouse position is still within the row sprites bounds. But I'm guessing that's not the most elegant or efficient solution.

This must be an incredibly common problem. What's the best solution?

Thanks in advance!

You can use ROLL_OVER and ROLL_OUT instead of MOUSE_OVER and MOUSE_OUT in such cases:

http://kinderas.blogspot.com/2008/12/quicktip-mouseover-vs-rollover.html

Yes, it is a very common problem, and Adobe have provided a solution.

You can use the mouseChildren property - set it to false to prevent children generating (yes, generating) mouse related events, which in your case will rid you from unwanted mouseOut events as there would be no correspoding mouseOver event generated when your cursor enters a childs area.

mouseChildren is available for DisplayObjectContainer objects.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObjectContainer.html#mouseChildren

rowSprite.addEventListener(MouseEvent.MOUSE_OVER, highlightRow, false, 0, true);
rowSprite.addEventListener(MouseEvent.MOUSE_OUT, unhighlightRow, false, 0, true);

function unhighlightRow (e:MouseEvent):void {
   if(Sprite(e.target).contains(e.currentTarget)) {
      return
   }
}

didn't test it but it should work

To disable the children from receiving mouse events set. That would fix your problem:

rowSprite.mouseChildren = false;