Flex event propagation

Question

I try to capture a event and I can't. Please look here: http://www.pata.ro/FlexTest/ The blue rectangle is the parent, and the other two are the children. If I roll over a child (red or green) I am still over the blue one (the RollOut is not fired for the blue one). I made the green rectangle a little transparent so you can see that it is over the red one. When I put my cursor over the green one in a place where it is over the red one, I get, BlueRollOver, GreenRollOver, RedRollOut. What I try to do is to get the red one RollOver too, even if it is under the green one. Like the parent captures RollOver even if I am over one of it's children. Or vice versa. So, how can I propagate the event down to the element under the one I have the mouse over?

Thanks

Answer 1

Try setting the useCapture argument to true when you add the event listener to the red layer.

Answer 2

It's because the green and the red rectangles are siblings, the events can only bubble up if there is a parent / child hierachy. Use the useCapture flag on the red rectangle.

Answer 3

Bellow you have my code. The event listeners were declared in the MXML, so I rewrite those for the red rectangle so I could add the useCapture argument. If I set useCapture to TRUE, the red rectangle dosen't capture any event, wherever I have the mouse. If I set it to false it works like before. So, how can I use this argument?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               applicationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            private function init():void
            {
                gRed.addEventListener(MouseEvent.ROLL_OVER,RedRollOver,true);
                gRed.addEventListener(MouseEvent.ROLL_OUT,RedRollOut,true);
            }

            private function BlueRollOver(ev:Event):void
            {
                idBlue.text="RollOver";
            }
            private function BlueRollOut(ev:Event):void
            {
                idBlue.text="RollOut";
            }
            private function RedRollOver(ev:Event):void
            {
                idRed.text="RollOver";
            }
            private function RedRollOut(ev:Event):void
            {
                idRed.text="RollOut";
            }
            private function GreenRollOver(ev:Event):void
            {
                idGreen.text="RollOver";
            }
            private function GreenRollOut(ev:Event):void
            {
                idGreen.text="RollOut";
            }
        ]]>
    </fx:Script>
    <s:Group id="gBlue" x="114" y="94" width="404" height="301" rollOver="BlueRollOver(event)" rollOut="BlueRollOut(event)">
        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="#0000CC"/>
            </s:fill>
        </s:Rect>
        <s:Group id="gRed" x="140" y="101" width="230" height="114">
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:SolidColor color="#EE0000"/>
                </s:fill>
            </s:Rect>
        </s:Group>
        <s:Group id="gGreen" x="39" y="20" width="200" height="200" rollOver="GreenRollOver(event)" rollOut="GreenRollOut(event)">
            <s:Rect width="100%" height="100%" alpha="0.6">
                <s:fill>
                    <s:SolidColor color="#00EE00"/>
                </s:fill>
            </s:Rect>
        </s:Group>
    </s:Group>
    <s:Label x="535" y="94" text="Blue" color="#0000CC" width="149" id="idBlue"/>
    <s:Label x="535" y="114" text="Red" color="#EE0000" width="173" id="idRed"/>
    <s:Label x="535" y="137" text="Green" color="#00EE00" width="173" id="idGreen"/>
</s:Application>