mouse events + remove image problems

[ljonny18]

Hi I am having problems removing children from my custom components using “mouseOver” events.

For example – I have an image, and when I “mouseOver” the image the image changes to another image etc…
This works fine, however, the image is also “clickable” and when clicks opens a new window. This leaves my image remaining in the “mouseOver” state, when theoretically is is not in a “mouseOver” state.

I assume the problem occurs due to the fact when the link is clicked, a new window has been opened therefore the flex app has lost focus to another window, thus leaving it in the “mouseOver” state. I have tried to add a “mouseDown” event to remove the image but I get the following error:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.


I am using the following AS within my component:

I embed my images

[Embed(source='../images/link.png')]
public var linkClass:Class;
public var linkImg:Sprite;

[Embed(source='../images/linkOver.png')]
public var linkOverClass:Class;
public var linkOverImg:Sprite;

set them up

linkImg = new Sprite();
var linkIcon:Bitmap = new linkClass();
linkImg.addChild(linkIcon);

linkImg.buttonMode = true;
linkImg.useHandCursor = true;
linkImg.mouseChildren = false;


linkOverImg = new Sprite();
var linkOverIcon:Bitmap = new linkOverClass();
linkOverImg.addChild(linkOverIcon);

linkOverImg.buttonMode = true;
linkOverImg.useHandCursor = true;
linkOverImg.mouseChildren = false;

addChild(linkImg);


linkImg.addEventListener(MouseEvent.MOUSE_OVER, mouseOverLink);
linkOverImg.addEventListener(MouseEvent.MOUSE_OUT, mouseOutLink);
linkOverImg.addEventListener(MouseEvent.MOUSE_DOWN , mouseDownLink);
linkOverImg.addEventListener(MouseEvent.CLICK, mouseClickLink);

eventListener functions:

public function mouseOverLink(eventObj:MouseEvent):void
{
this.addChild(guageArrowOverImg);
}

public function mouseOutLink(eventObj:MouseEvent):void
{
removeChild(guageArrowOverImg);
}

public function mouseDownLink(eventObj:MouseEvent):void
{
removeChild(guageArrowOverImg);
}

public function mouseClickLink(eventObj:MouseEvent):void
{
var linkClick:URLRequest = new URLRequest("http://…");
navigateToURL(linkClick,"_blank");
}

[dr_zeus]

public function mouseOutLink(eventObj:MouseEvent):void
{
if(guageArrowOverImg.parent == this)
{
removeChild(guageArrowOverImg);
}
}

public function mouseDownLink(eventObj:MouseEvent):void
{
if(guageArrowOverImg.parent == this)
{
removeChild(guageArrowOverImg);
}
}

Also, you should use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT instead of MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT. You may encounter problems related to bubbling if you don't.