Hiding a menu on click outside

Question

I have a menu that pops up and at the same time is hidden on a mouse click event on a button but I would like to be able to hide said menu by clicking outside the menu movieclip and its button. Is it possible to accomplish that in as3?

So far this is the solution I found, adapted and have being trying to work with but still not getting anywhere.

switchbd_btn.addEventListener(MouseEvent.CLICK, onClickHandler);
stage.addEventListener(MouseEvent.CLICK, onClickHandler);

function onClickHandler(event : MouseEvent) : void  {
            switch(event.target)
            {
                case switchbd_btn:
                    switchbd.gotoAndStop(2);
                    switchbdIN.start();
                    switchbd_btn.filters = [ONf];
                    break;

                case stage:
                    switchbdOUT.start();
                    switchbd.gotoAndStop(3);
                    switchbd_btn.filters = [OFf];
                    break;
            }
}

My original working code :-

//////////////////////SWITCH BOARD\\\\\\\\\\\\\\\\\\\\\\\\\\\\
switchbd_btn.addEventListener(MouseEvent.MOUSE_DOWN, ShowswitchBD);
var switchbdIN:Tween = new Tween (switchbd, "x", Strong.easeOut, 1089.05, 277.85, 1, true);
var switchbdOUT:Tween = new Tween (switchbd, "x", Strong.easeOut, 277.85, 1089.05, 1, true);
var ONf:DropShadowFilter = new DropShadowFilter (-1,26,0xCCCCCC,1,2,2,1,3,false,false,false);
var OFf:DropShadowFilter = new DropShadowFilter (6,26,0x000000,1,2,2,1,3,false,false,false);

function ShowswitchBD(e:MouseEvent):void {

    if (switchbd.currentFrame != 2)
    {
        switchbd.gotoAndStop(2);
        switchbdIN.start();
        switchbd_btn.filters = [ONf];
}
    else {
        switchbdOUT.start();
        switchbd.gotoAndStop(3);
        switchbd_btn.filters = [OFf];
    }
}

switchbd is the menu movieclip, and switchbd_btn is the button.

Answer 1

Here is a pattern to accomplish what you're asking. This assumes your menu movieClip is called: switchbd and you show/hide it with the button: switchbd_btn.

First, add a click listener to your button and create the handler function:

switchbd_btn.addEventListener(MouseEvent.CLICK, toggleMenu);

function toggleMenu(e:Event):void {
    //the x position should be 277.85 when visible
    if(switchbd.x <= 278){
        hideMenu();
    }else{
        showMenu();
    }
}

Now create the show and hide menu functions:

function showMenu():void {
    switchbd.gotoAndStop(2); //or however you 'show' it

    switchbdIN.start();
    switchbd_btn.filters = [ONf];

    //since the menu is visible, listen for global mouse clicks to hide it
    stage.addEventListener(MouseEvent.CLICK, hideMenuGlobalClick);
}

function hideMenu():void {
    switchbd.gotoAndStop(3);
    switchbdOUT.start();
    switchbd_btn.filters = [OFf];

    //stop listening for global mouse clicks since the menu is hidden now
    stage.removeEventListener(MouseEvent.CLICK, hideMenuGlobalClick);
}

function hideMenuGlobalClick(e:Event):void {
    var target:DisplayObject = e.target as DisplayObject;

    //crawl up the display tree from the item click until there is no parent (stage)
    while(target && target.parent){
        //if the target is the menu or button, exit this function
        if(target == switchbd || target == switcbd_btn){
            return;
        }

        //move on to the next item up the chain
        target = target.parent;
    }

    //if you made it this far, it wasn't the menu that was clicked
    hideMenu();
}