Question

I’m using code based on this post.

It uses a focus_out event to detect if there is a change that needs to be committed. However I notice that a FOCUS_OUT event is only called if you click away from the textfield but inside the component. Is there any way I can listen for clicks outside the component from within the component?

    addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);

    protected function onFocusOut(event:FocusEvent):void
    {
        _updatedText = text;

        if(_updatedText != _originalText){
            dispatchEvent(new Event(Event.CHANGE));
        }

        setEditable(false);
    }

Answer 1

In the component itself, you can do this:

systemManager.addEventListener( FocusEvent.KEY_FOCUS_CHANGE, focusChangeHandler );
systemManager.addEventListener( FocusEvent.MOUSE_FOCUS_CHANGE, focusChangeHandler );

Just be sure you clean up and remove the event listener before your component is removed from the stage (assuming it is added dynamically). That will prevent you from stacking up a bunch of event listeners.

Alternatively, if you just want to find out whenever someone clicks outside of a specific component, you can do something like this:

systemManager.addEventListener( MouseEvent.MOUSE_DOWN, system_mouseDownHandler );

private function system_mouseDownHandler( event:MouseEvent ):void {
  if( !event.target != this && !this.contains(event.target as DisplayObject) ){
    // Do Something Here
  }
}

Again, make sure you cleanup any event listeners if this component is added/removed dynamically.

Hope this helps!

EDIT:

If you want to cleanup the eventListeners, do something like this (called when the remove event is triggered in your component):

<mx:Component remove="myRemoveHandler();" />

private function myRemoveHandler():void {
  if( systemManager.hasEventListener( MouseEvent.MOUSE_DOWN ) systemManager.removeEventListener( MouseEvent.MOUSE_DOWN, system_mouseDownHandler );
}

Obviously substitute the event listeners that you ended up using (Focus or Mouse).