HI,

     I am sure this is very basic, however I am not able to find the solution. 



   I have a base ShapeContainer(UIComponent). I add a uicomponent which has mouse down listener to ShapeContainer. the listener works great.

When I add a simple sprite(draw square) on the ShapeContainer, The listener does not work any more.

In the code, if I comment below lines, The event listener works fine.
var square:Sprite = new Sprite(); square.graphics.lineStyle(4,0x00FF00); square.graphics.drawRect(0,0,20,20); square.mouseEnabled=false; shapeContainer.addChildAt(square,1);

I have tried few things like, mouseenabled=false on top sprite. also tried to add addChildAt but non of them did any help.

How can I draw a shape and also have the event listener work.

enter code here

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {               



            var shapeContainer:UIComponent = new UIComponent();
            shapeContainer.x=100;
            shapeContainer.y=100;
            shapeContainer.width=200;
            shapeContainer.height=200;
            rawChildren.addChild(shapeContainer);


            var EventListenerShape:UIComponent = new UIComponent();

            EventListenerShape.x=100;
            EventListenerShape.y=100;
            EventListenerShape.width=200;a
            EventListenerShape.height=200;

            EventListenerShape.graphics.clear();
            EventListenerShape.graphics.beginFill(0xf1f1f1, 0.1);
            EventListenerShape.graphics.drawRoundRect(0, 0, 200, 200, 10, 10);              
            EventListenerShape.alpha = 0;
            EventListenerShape.graphics.endFill();
            EventListenerShape.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownfunc);
            shapeContainer.addChild(EventListenerShape);


        var square:Sprite = new Sprite();
        square.graphics.lineStyle(4,0x00FF00);
        square.graphics.drawRect(0,0,20,20);
        square.mouseEnabled=false;
        shapeContainer.addChildAt(square,1);    



        }

        private function mouseDownfunc(e:MouseEvent){
            trace("mouse Down **");
        }

          
    ]]>
</mx:Script>

<mx:Canvas id="uic" width="100%" height="100%"   backgroundColor="0xFFFFFF">

</mx:Canvas>