Have Geek Brain

Flex Canvas and Mouse Event

This simple code shows a green canvas on a red canvas, I would like the Green canvas to allow the mouse event to be caught by the child behind it : 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>
+1


a source to share


5 answers


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



cvsselect.addEventListener(MouseEvent.MOUSE_DOWN, md2);
0


a source


mouseEnable false did the trick, any other ways?



0


a source


You need to change the way of parenting children. Events "walk" the display tree. So you have "main application" → "red canvas" and "main application" → "green canvas".

So when you hit the green canvas, the events never reach the red canvas. It will go from "main application" to "green canvas" and back to "main application".

What you need to do is make the green canvas a child of the red canvas, after which you can add listeners to the red canvas and it will be able to listen to events fired from the green canvas.

If you do this, remember that event.target is where the event originated from (green canvas), and if you are listening inside a "red canvas" then event.currentTarget will be the "red canvas".

0


a source


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

0


a source


cvsselect.mouseChildren = false;

cvsselect.mouseEnabled = false;

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

0


a source






More articles:


All Articles