Flex canvas and mouse event

Question

Hello flexers,

This simple code shows a green canvas on a red canvas, i would like the Green canvas to let the mouse down event to be catch by the child behind him: the red Canvas.

How can i do this ?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
    <mx:Canvas id="bg" width="100%" height="100%" backgroundColor="white" />

     <mx:Script>
        <![CDATA[

            private function init():void {

            var cvstest:Canvas = new Canvas();
            cvstest.width = 200;
            cvstest.height = 200;
            cvstest.x = 100;
            cvstest.doubleClickEnabled = true;
            cvstest.addEventListener(MouseEvent.DOUBLE_CLICK, dc);
            cvstest.addEventListener(MouseEvent.MOUSE_DOWN, md);
            cvstest.setStyle("backgroundColor",0xff0000);
            this.addChild(cvstest);   


            var cvsselect:Canvas = new Canvas();
            cvsselect.width = 20;
            cvsselect.height = 20;
            cvsselect.x = 140;
            cvsselect.doubleClickEnabled = false;
            cvsselect.mouseChildren = true;
            cvsselect.addEventListener(MouseEvent.MOUSE_DOWN, md2);
            cvsselect.setStyle("backgroundColor",0x00ff00);
            this.addChild(cvsselect);   
            }

         public function dc (e:MouseEvent) : void {
            trace("DOUBLE CLICK ON TEST CANVAS");
        } 
         public function md (e:MouseEvent) : void {
            trace("SINCLICK ON TEST CANVAS");
        } 
        public function md2 (e:MouseEvent) : void {
            trace("GREEN CLICK ON TEST CANVAS");
        } 
        ]]>    
    </mx:Script>
</mx:Application>

Answer 1

mouseEnable false did the trick, any other ways ?

Answer 2

You'll need to change the way you parent the children. The events 'walk' the display tree. So you have 'main app'-> 'red canvas' & 'main app'-> 'green canvas'.

So when you click the green canvas the events never reach the red canvas. It will go from 'main app' to 'green canvas' & back up to the 'main app'.

What you'd need to do is make the 'green canvas' a child of the 'red canvas' then you could add listeners to the 'red canvas' and that will be able to listen for events fired from the 'green canvas'.

Should you do this remember that the event.target is where the event came from (green canvas) and if you are listening inside the 'red canvas' then the event.currentTarget will be the 'red canvas'.

Answer 3

You could also implement the observer design pattern, but then you would have to extend the Canvas class.

Answer 4

Don't add the mouse down listener to the green canvas i.e. remove the line

cvsselect.addEventListener(MouseEvent.MOUSE_DOWN, md2);

Answer 5

cvsselect.mouseChildren = false;

cvsselect.mouseEnabled = false;

and remove the line cvsselect.addEventListener(MouseEvent.MOUSE_DOWN, md2);

Answer 6

see here

http://java.pakcarid.com/Cpp.aspx?sub=544&sls=25&topid=43