Graphic added over button is my blocking MouseEvent why?

Question

Hi everyone my problem today is I have a couple of buttons that slide up and down, when in the up state I add an X graphic to symbolize a a close button. However the X graphic seems to be blocking my button action.

_{(source: flickr.com)}

I have an example in the movie I've been working on >> here <<. There are 2 movies here, the big one if you click either blue tab you will see what I'm talking about, X button shows up, but clicking over the X area will not drop the button down. You have to click on blue button area to drop the button back down.

Now I've made a smaller test movie adding the X button basically the same way and if you will notice it works fine (will animate to the right even if you click over the X graphic)

Here is my code in the Big movie (I hid the tween code so it won't be so long):

function handleButtonClick(event:MouseEvent):void {
var button:MovieClip=event.target as MovieClip;
var id:Number=Number(button.name.split("button")[1]);

dispatchEvent(new CustomEvent(CustomEvent.PAUSE_MOVIE, {}));

if (! $btn1&&! $btn2) {
    if (storeButton2==buttons[id]) {
        closeTabX.x = buttons[1].width - (closeTabX.width + 10);
        closeTabX.y=buttons[1].height/2-15;
        buttons[1].addChild(closeTabX); // X added here
        $btn2=true;
        $btn1=false;
    } else if (storeButton1 == buttons[id]) {
        closeTabX.x = buttons[0].width - (closeTabX.width + 10);
        closeTabX.y=buttons[0].height/2-15;
        buttons[0].addChild(closeTabX); // X added here
        $btn1=true;
        $btn2=false;
    }
} else if ($btn1 && !$btn2) {
    if (storeButton2==buttons[id]) {
        buttons[0].removeChild(closeTabX); // X removed here
        buttons[1].addChild(closeTabX); // X added here
        $btn2=true;
        $btn1=false;
    } else if (storeButton1 == buttons[id]) {
        buttons[0].removeChild(closeTabX); // X removed here
        $btn1=false;
    }
} else if ($btn2 && !$btn1) {
    if (storeButton2==buttons[id]) {
        buttons[1].removeChild(closeTabX);
        $btn2=false;
    } else if (storeButton1 == buttons[id]) {
        buttons[1].removeChild(closeTabX); // X removed here
        buttons[0].addChild(closeTabX); // X added here
        $btn1=true;
        $btn2=false;
    }
}

}

Now here is the code in my basic test movie:

var blueButton:MovieClip;
var closeBtnX:MovieClip;

blueButton = new BlueButton;
blueButton.buttonMode = true;

closeBtnX = new CloseTabX;
closeBtnX.x = blueButton.width/2 - closeBtnX.width;

addChild(blueButton);


blueButton.addEventListener(MouseEvent.MOUSE_UP, specialClick);

function specialClick(event:MouseEvent):void
{
  blueButton.addChild(closeBtnX); // X added here
  blueButton.x = blueButton.x+10;
}

I don't get why you can't click on the X in the main example to close the tab, but you can in the my small basic movie? Thoughts, ideas?

Answer 1

you didn't post how you're instantiating 'closeTabX' in the first example, is it the same class as the smaller example(CloseTabX)?

A simple 'fix' is that if you set it's properties as follows it will not block mouse events to it's parent:

closeTabX.mouseEnabled = false;
closeTabX.mouseChildren = false;

If that class is never intended to be a mouse target, you could also set these properties in the class constructor to prevent any instances of that class from blocking mouse events.