MovieClips and e.target, retrieving internal text

Question

My problem is the following:

I have a menu made up of MovieClips containing a dynamic text box (text_txt) and a basic background rectangle.

I've assigned each item, defined by instance names (item1_mc, etc) an event listener for MouseEvent.CLICK by putting all item names into an array, and looping through it.

var menuItemsArray:Array = [item1, item2, item3, item4, item5, item6, item7, item8, item9, item10, item11, item12];

for(var i:int = 0; i < menuItemsArray.length; i++){
    menuItemsArray[i].text_txt.text = labelArray[i];
    menuItemsArray[i].addEventListener(MouseEvent.CLICK, menuItem_click);
}

...and then determine which is being pressed (and strip the text out of it) by using:

function menuItem_click(e:MouseEvent){
    unit_name = e.target.text;
    }

... and everything works fine if I click directly on the TextField within the MovieClip (returns the text), but if I click on the rim of the MovieClip (and outside the area of the dynamic text box) it just returns Error #2007 because it attempted to pull text from the [object menuItem_button_23] which contains no text.

What ideally I want to happen is that regardless of where I click on the MovieClip 'button', I get the text pulled, but I've tried things including e.currentTarget, e.target, and a combination of both along with .text, .text_txt.text, etc -- but everything ends with the same issue of having a 'dead' zone along the outside.

Furthermore, essentially what I'm trying to do is create a menu of MovieClip 'buttons' which are labeled (via the internal text field) by an array containing the label text. Then, when I click the button I want to determine which is pressed, and retrieve the label to allow me to access further information in relation to said label text.

If anyone has a solution, or a better way of what I'm trying to do I'm all ears. Should note my AS3 experience/knowledge is average at best, and I'd love to learn some new techniques to accomplish what I'm trying to do. I can also provide more information if needed.

Thanks!

Answer 1

You have to check if your target is actually a TextField. If it is not, then you have to refer to text_txt inside.

function menuItem_click(e:MouseEvent){
    if (e.target is TextField) unit_name = e.target.text;
    else {
        if (e.target.text_txt) unit_name=e.target.text_txt.text; 
        else unit_name='';
    }
}

This first check what is the actual target of an event. If it's a TextField, then you clicked on it, so let's take its text. If not, then it should be a MovieClip, we check if it has a "text_txt" property assigned, because if yes, it'll be a TextField, so we get the text out of it.

Answer 2

What you also can do is to switch of mouseChildren on the movieclip and define a getter/setter pair on it to read/write the text of the nesting text field.

In your MovieClip in the library of Flash write the following code into one of your clip's layers

this.mouseChildren = false;

function get text():String { return text_txt.text; }
function set text(value:String):void { text_txt.text = value; }

The first line disables any child of your movieclip to be a target for mouse events and clicking somewhere on the visible area of the movieclip trigger an click-event with its target property set to the movieclip. This unifies the way you have to handle the event.

The getter/setter pair encapsulates access of the text fields text property, so there is no need to read/write text_txt from outside of the movieclip.

Your event listener should look like you expected

function menuItem_click(e:MouseEvent):void {
    unit_name = e.target.text;
}

In addition, using this way it is not necessary to access text_txt directly during initialization. You can simplify your for-loop a bit and write:

for(var i:int = 0; i < menuItemsArray.length; i++){
    menuItemsArray[i].text = labelArray[i];
    menuItemsArray[i].addEventListener(MouseEvent.CLICK, menuItem_click);
}

Hope this is a solution fits your needs best. Tell me, if you have any problems with it or when if forgot something. ;)

Answer 3

At the request of 32bitkid, I am posting my former comment as an answer:

Try using e.currentTarget. Using e.target gets you the original item on the display list that the CLICK event originated from. Since CLICK is a bubbling event, it often will not be the MovieClip you are referring to, but rather an internal object of the MovieClip (hence e.target only working in your example when you actually click the TextField). If you use e.currentTarget, what you are doing is retrieving the object to which you added the event, in this case the outer MovieClip, so e.currentTarget.text_txt.text should do the trick...