Click-outside event on custom components in flex

Question

Is there a way to write a custom event that gets triggered when the user clicks outside of that custom component instance? Basically anywhere else in the main flex app. Thanks.

Answer 1

You can use the FlexMouseEvent.MOUSE_DOWN_OUTSIDE event. For example:

myPopup.addEventListener(
   FlexMouseEvent.MOUSE_DOWN_OUTSIDE,
   function(mouseEvt:FlexMouseEvent):void
   {
       PopUpManager.removePopUp(myPopup);
   }
);

Answer 2

stage.addEventListener( MouseEvent.CLICK, stgMouseListener, false, 0, true );

...

private function stgMouseListener( evt:MouseEvent ):void
{
    trace("click on stage");
}


private function yourComponentListener( evt:MouseEvent ):void
{
    trace("do your thing");
    evt.stopPropagation();
}

Answer 3

Got this from Senocular. I think it applies to this subject, at least it did the trick for me. What jedierikb suggested seems to be the same, but a little incomplete.

Preventing Event Propagation

If you want to prevent an event from propagating further, you can stop it from doing so within an event listener using stopPropagation() (flash.events.Event.stopPropagation()) or stopImmediatePropagation() (flash.events.Event.stopImmediatePropagation()). These methods are called from the Event objects passed into event listeners and essentially stop the event from happening - at least past that point.

stopPropagation prevents any objects beyond the current from recieving the event, and this can be within any phase of the event. stopImmediatePropagation does the same but also takes the extra step of preventing additional events within the current target receiving the event from happening too. So where as stopPropagation would prevent sprite A's parent from receiving the event, stopImmediatePropagation would prevent sprite A's parent as well as any other listeners listening to sprite A from receiving the event.

Example: toggle between using stopPropagation and stopImmediatePropagation ActionScript Code:

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x4080A0);
circle.graphics.drawCircle(50, 50, 25);
addChild(circle);

circle.addEventListener(MouseEvent.CLICK, clickCircle1);
circle.addEventListener(MouseEvent.CLICK, clickCircle2);
stage.addEventListener(MouseEvent.CLICK, clickStage);

function clickCircle1(evt:MouseEvent):void {
    evt.stopPropagation();
    // evt.stopImmediatePropagation();
    trace("clickCircle1");
}
function clickCircle2(evt:MouseEvent):void {
    trace("clickCircle2");
}
function clickStage(evt:MouseEvent):void {
    trace("clickStage");
}

Click the circle and see how the event is stopped with each method. stopPropagation prevented the stage from receiving the event while stopImmediatePropagation also prevented clickCircle2 from recognizing the event

normal output

clickCircle1
clickCircle2
clickStage

stopPropagation output

clickCircle1
clickCircle2

stopImmediatePropagation output

clickCircle1 

Answer 4

Flex/Actionscript 3 - close popupanchor on mouse clicked anywhere outside popup anchor

for 4.6 SDK try this..

frmPUA.popUp.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, menuPopOutside, false, 0, true);

Full code is avaiable at

http://saravanakumargn.wordpress.com/2013/12/14/flexactionscript-3-close-popupanchor-on-mouse-clicked-anywhere-outside-popup-anchor-2/