ActionScript 3, handling mouse event cases

Question

I'm learning ActionScript 3 and at the moment, following a tutorial here http://www.senocular.com/flash/tutorials/as3withmxmlc/ . It describes a simple application which put a ball on the stage and lets the user drag it around. But it has bugs, especially because it doesn't handle the case that the user drags the pointer off the stage. This has gotten me thinking about a better way to handle cases. For starters, I'm considering how to handle MOUSE_UP events. I'd like to write something like this:

public class Test extends Sprite
{
    public function Test(stage:Stage)
    {
        mySprite = SomeSpriteClass()
        stage.addEventListener(MouseEvent.MOUSE_UP, handleStageMouseUp);
        mySprite.addEventListener(MouseEvent.MOUSE_UP, handleSpriteMouseUp);
    }

    private function handleStageMouseUp(event:MouseEvent):void {
        // how do I determine here if there was also a MOUSE_UP on the Sprite?
        // Perhaps I could check the click coordinates of 'event' to see if 
        // they are superimposed on the Sprite.         

    }

    private function handleSpriteMouseUp(event:MouseEvent):void {
        // I don't need this method if I can handle all cases in the 
        // method above.
    }
}

This issue that arises is that with the event model ActionScript3 uses, I don't know how to look for cases that involve combination of events. Alternatively as I wrote in the comment above in handleStageMouseUp() I could check to see if a mouse event occurs over 'mySprite' (how would I do that?)

What I'd really like to do is be able to combine all my case logic in something like this:

private function handleAllCases(...):void {
    if (..mouse up on stage but not sprite..) {
        .. handle case ..;
    } else if ( .. mouse up on both stage and sprite .. ) {
        .. handle case .. ;             
    }
}

Is there a way to do this, or perhaps a better way to think about it?

Answer 1

You check Event.target and Event.currentTarget. target is the object that originally dispatched the event and currentTarget is the latest object to dispatch it (generally the object your listener is attached to).

Quick overview of that. Assume obj2 is wrapped by obj1 which is on the stage. Quick hierarchy:

-Stage
--obj1
---obj2

If you were to trigger an event (that bubbles, that is important as it allows an event to go through its parents until it reaches an event handler. I believe all MouseEvents do this ) in obj2 and had a listener attached to Stage, obj2 would be the target and Stage would be the currentTarget.

So how does this work for you? Well, you just need to check what target and currentTarget are to determine where the event started and where it currently is at.

Plug this into Flash and click on the object and release in various locations and take a look at your console (I did test this):

import flash.display.*;
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.drawRect(0,0,100,100);
mySprite.graphics.endFill();
addChild( mySprite);
stage.addEventListener(MouseEvent.MOUSE_UP, handleStageMouseUp);

function handleStageMouseUp(e:MouseEvent):void {     
    trace( "handleStageMouseUp - target == stage: " + (e.target == this.stage) );
    trace( "handleStageMouseUp - target == mySprite: " + (e.target == mySprite) );
    trace( "handleStageMouseUp - currentTarget == stage: " + (e.currentTarget == this.stage) );
    trace( "handleStageMouseUp - currentTarget == mySprite: " + (e.currentTarget == mySprite) );
    trace( "--------" );
}

For the most part, in your stageUp handler, you can check if e.target == mySprite to determine if it also happened to mySprite.

There is a caveat here, though. If your Sprite has children, one of those children will be the target. However, if you set mySprite.mouseChildren = false, it will not register mouse events on children which means it will behave as it does in the above example.

Hopefully that helps