Monday 31 January 2011

Flex4, event MOUSE_OUT is triggered for every MOUSE_OUT event of its children

problem:
Suppose you have a Group or Module named MainMenuItem, where you have several other childer components in it. You want when mouse gets of the MainMenuItem to colapse it, in order to create a pull down menu. The problem is that Flash runtimer returns the MOUSE_OUT event where ever this happen in the children of the MainMenuItem.

solution
Do not strangle with "bubbles" and "stop.propagation", I tried, they didn't work. In the implementations of the Listener, just check if the target of the event is children indeed; and if its not, do perfrom the action you want (the collapse in this example); because in real the mouse is not out but it is still over on your Group (or Module).


I have developed the follow two functions where you must use it inside the "mouseover" and "mouseout" handlers, because, in real world, these events are triggered from and descendants:

  public static function isMouseOver(parent:Object,e:MouseEvent):Boolean{
   return isParent(parent,e.target);
  }
  public static function isMouseOut(e:MouseEvent):Boolean{
   return !isParent(e.currentTarget,e.relatedObject);
  }
 
example how to use these two functions
additionally here I have add a "mouseover" local variable to indicate is the mouse was already over.

        internal var mouseover:Boolean;
 
        internal function Handler_MouseOut(e:MouseEvent):void{
            if ((DnGenUtils.isMouseOut(e))&&(mouseover)){
                mouseover=false;
                an.getMotion(lb_main,"mouseout").start();
                an.getMotion(lb_sub,"mouseout").start();
                an.getMotion(im_icon,"mouseout").start();
            }
        }
       
        internal function Handler_MouseOver(e:MouseEvent):void{
            if ((DnGenUtils.isMouseOver(this,e))&&(!mouseover)){       
                mouseover=true;
                an.getMotion(lb_main,"mouseover").start();
                an.getMotion(lb_sub,"mouseover").start();
                an.getMotion(im_icon,"mouseover").start();
            }
        }
   

No comments:

Post a Comment