1 Reply Latest reply on Nov 8, 2006 7:17 PM by peterent

    Flex event handling question

    la_gouyn Adobe Employee
      Hi,

      Flex question.

      Let's say I have two Images on a Canvas, and they overlap. The images have transparency.
      If the user clicks in a transparent portion of the top Image, I would like for the event to be passed to the Image underneath. (If the click is in an opaque portion of the top image, I want the top image to handle it normally.)

      Is there a preferred way for the mouse event to get passed to this underneath Image, even though it isn't the intended recipient of this event?

      A Flash user forum member suggested using a MovieClip, but I'm not sure that I can use a MovieClip in Flex. When I call addChild to add it to a parent container, the add fails because MovieClip doesn't implement a particular interface.

      Thoughts?

      -Allan
        • 1. Re: Flex event handling question
          peterent Level 2
          There really isn't an easy way to do this in Flex - or rather, Flash. You have 2 objects with one partially covering the other. An event on the common area is picked up by the top-most object. There isn't a way to have it continue to go lower.

          If this is of vital importance, you could have the event placed on the images' container (eg, <mx:Canvas id="testCanvas" click="handleClick(event)" >). The event's target will be the top-most image. Then loop through all of the container's children and find the first one that is hit with the event's mouse coordinates. The first one you reach is the bottom-most one. Something like this:

          private function handleClickEvent( event:MouseEvent ) : void {
          var n:Number = testCanvas.numChildren;
          for(var i:Number=0; i < n; i++) {
          var child:DisplayObject = testCanvas.getChildAt(i);
          if( child.hitTestPoint(event.stageX,event.stageY) ) {
          output.text += "\nHit child "+child.toString();
          break;
          }
          }
          }