Actionscript 3.0: Having a weird issue with a click target

Question

So I generated 65 movieclips inside a container movieclip. (It's in a container due to this being on a game and it's within a popup.) The MovieClips are created by accessing an AS3 linked MovieClip in the library. Each one is stored in an array of MovieClips. From there I put some text information (including some hidden text) into each one and add some event listeners. The code itself works just fine except for one thing. The Event Listener receives the target as one of the TextFields inside the MovieClip instead of the MovieClip itself. I made absolute certain that the Mouse Event Listeners were applied to the movieclips.

for (var i:int = 0; i < mcArray.length; i++)
{
    mcArray[i] = new IDButton();
    MovieClip(mcArray[i]).tf1.text = String(ID1[i])
    MovieClip(mcArray[i]).tf2.text = String(ID2[i]);
    MovieClip(mcArray[i]).tf3.text = String(ID3[i]);
    MovieClip(mcArray[i]).tf1.selectable = false;
    MovieClip(mcArray[i]).tf2.selectable = false;
    MovieClip(mcArray[i]).tf3.selectable = false;
    MovieClip(mcArray[i]).tf1.visible = false;
    MovieClip(mcArray[i]).tf2.visible = false;
    MovieClip(mcArray[i]).name = "MC" + String(i);
    container.addChild(MovieClip(mcArray[i]));
    MovieClip(mcArray[i]).addEventListener(MouseEvent.CLICK, mcClickHandler);
    MovieClip(mcArray[i]).addEventListener(MouseEvent.ROLL_OVER, mcHoverHandler);
    MovieClip(mcArray[i]).addEventListener(MouseEvent.ROLL_OUT, mcOffHandler);
    MovieClip(mcArray[i]).x = 0;
    MovieClip(mcArray[i]).y = MovieClip(mcArray[i]).height * i;
}

(To be honest I've no idea if having the MovieClip there is redundant. I suppose it shows my general lack of trust in flash.)

So to test I traced the target name in the mcClickHandler function and it kept returning "tf3".

Answer 1

Events in AS3 have two "target" properties: target and currentTarget. If one isn't working, the other usually will.

Basically, target is the actual object that the mouse clicked, and currentTarget is the object that has the listener attached to it.

More info in this SO question: Difference between e.target and e.currentTarget

Answer 2

Try to set mouseChildren to false:

MovieClip(mcArray[i]).mouseChildren = false;

Answer 3

I would go for a more simple version; add only one event listener and use Event.target to determine on which item (inside the container) is clicked. You can make smart use of it's type (class). Let's say all you buttons extend a custom class called IDButton, and they all need to do the same (like calling a function), but with a parameter based on it's id.

This is helpful if the buttons should basically do the same thing, and there aren't a lot other types of clips inside the same container that need to listen to the same mouse events.

package  
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;

    public class Test extends Sprite
    {
        public function Test()
        {
            // one listener for all clicks
            this.addEventListener(MouseEvent.CLICK, handleClick);
            this.addEventListener(MouseEvent.MOUSE_OVER, handleHover);
            this.addEventListener(MouseEvent.MOUSE_OUT, handleHover);
        }

        private function handleClick(event:MouseEvent):void
        {
            // you're need to be sure it's a IDButton
            if (event.target is IDButton)
            {
                var button:IDButton= event.target as IDButton; 
                this.showById(button.id); // let's say CustomButton has a public var 'id'
            }
        }

        private function showById(id:int):void
        {
            // do something
        }


        private function handleHover(event:Event):void
        {
            if (event.target is IDButton)
            {
                var button:IDButton = event.target as IDButton;
                switch (event.type)
                {
                    case MouseEvent.ROLL_OVER:
                    {
                        button.alpha = 0.8;
                        break;
                    }
                    case MouseEvent.ROLL_OUT:
                    {
                        button.alpha = 1;
                        break;
                    }
                }
            }
        }
    }
}

Hope that helps.