Question

I want to handle the focus out Handler only to the component which i want to listen but not to the children inside to that component.
Example i have a vgroup inside that vgroup container i have UI Controls like TextInput, TextArea, ComboBox and i want to listen focus out for VGroup so i kept focusoutHandler for VGroup but when i change the focus from textinput to textarea or combobox focusoutHandler is getting called.How to give focusOut only for VGroup.

<s:VGroup id="vGroup" focusOut = vGroupFocusOutHandler(event)>
   <s:TextInput />
   <s:TextArea/>
   <s:ComboBox/>  
<s:VGroup/>

Answer 1

You have to make sure that the object the user is focusing into is not a child (directly or indirectly) of the VGroup. If it is a child we don’t do anything; if it’s not, we do what has to be done.

Here’s how:

<s:VGroup id="vGroup" focusOut="handleFocusOut(event)">
    <s:TextInput />
    <s:TextArea />
    <s:ComboBox />  
</s:VGroup>

.

private function handleFocusOut(event:FocusEvent):void {
    //only do something if we focus out of vGroup
    if (!isInVGroup(event.relatedObject)) {
        trace(event);
    }
}

private function isInVGroup(el:InteractiveObject):Boolean {
    if (!el || !el.parent) return false;

    var parent:DisplayObjectContainer = el.parent;
    while (parent != vGroup && parent != stage) {
        parent = parent.parent;
    }

    return parent == vGroup;
}

The relatedObject property is the element the user focuses into.