MouseEvent – relatedObject explained

One of those things that isn’t immediately clear based on its name, the relatedObject property is a reference to the object that the mouse is now over, and is receiving a MouseEvent.MOUSE_OVER event.  This property is valid for both over and out events. This is a really useful property, a typical example is working with mutually exclusive rollovers. if you have a rollover popup that should remain visible if the users cursor rolls into the popup itself, you need to case your mouseOut to only hide the popup if the cursor is not over the popup itself. Here is an example:

Assuming this event is attached to the object that triggered the rollover popUp, there is an existing method to hide the popup called hidePopUp(),  and a popup named popUp_mc: 

private function eMouseOutHandler(e:MouseEvent):void{
      if(e.relatedObject != popUp_mc) hidePopUp();
}

In this case, if the cursor is over the popup, it will remain visible. If not, we know that the cursor is not over the popup and it should be hidden. Note that you will now need to case for a mouseOut on the popup itself now, since if the user rolls through the pop up and out it will need to know to hide itself. However, the reverse of the code above will need to be implemented for this mouseOut – if the relatedObject property is the object that received the initial rollover, again we should ignore hiding it since cursor would now be over the object that would have shown the popup in the first place.

Leave a Reply