How to stop Mouse Out event on Flex Canvas firing for child elements

Question

I am using a Canvas itemRenderer for a container I use to display images. See pseudo code below.

image = new Image();
image.source = data.@thumb;
this.addChild(image);
this.addEventListener(MouseEvent.MOUSE_OVER, enlarge(image));
this.addEventListener(MouseEvent.MOUSE_OUT, shrink(image)); 

When I mouse over the canvas, the enlarge function is called. However as soon as I move the mouse onto the image, or another child element, the MOUSE_OUT event is fired.

Can anyone point me in the direction of a way to disable this behaviour?

Thanks :)

Answer 1

You should use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT events instead.

From the Flash CS4 documentation:

When the mouse enters the area of a display object or the area of any of its children from an object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object of the display object container, even if the mouse was already over another child object of the display object container.

Answer 2

I agree with Josh that the ROLL_OVER events seem more appropriate to what you're doing. However, you should be aware of the mouseChildren property of flash.display.DisplayObjectContainer (an ancestor of UIComponent).

Answer 3

Rollout works for me. About the comboBox problem: You can also check if the target of the event is a child from the container.