Question

I’ve got a clip that I’m drawing and adding to the stage, and when it’s clicked, it adds two duplicates of itself as children. I want these children to be clickable, but the problem is that, if they are clicked, it registers the click as being for both the parent click and its children. So then instead of adding two new clips, it adds 4. I can solve this by adding mouseChildren = false to the movieClip, but then when I do that, the new clips are drawn from the center of the parent clip, instead of from the origin of the clip that was clicked. How do I resolve this? This is my code:

function clickCircle(e:MouseEvent):void {
    var thisCircle = e.target;
    for (var i=0; i<thisCircle.childCircles;i++){
        trace('drawCircle' + i);
        drawCircle(thisCircle);
    }
}

function drawCircle(parentCircle){

    //trace('draw circle' + childCircles);
    var xPos;
    var yPos;
    if (circleCount == 0){
        xPos = centerStageX;
        yPos = centerStageY;
    } else {
        //xPos = parentCircle.x;
        //yPos = parentCircle.y;
        xPos = yPos = 0;
    }

    var newCircle:Shape = new Shape();
    newCircle.graphics.beginFill(circleColor);
    newCircle.graphics.drawCircle(0,0,cr); //x, y, radius
    newCircle.graphics.endFill();

    var circleClip:MovieClip = new MovieClip();
    //circleClip.mouseChildren = false;
    circleClip.childCircles = numCircles;
    circleClip.x = xPos;
    circleClip.y = yPos;
    circleClip.addChild(newCircle);
    circleClip.id = circleCount;
    if (circleCount == 0){
        addChild(circleClip);
    } else {
        parentCircle.addChild(circleClip);
    }

    circleArray.push(circleClip);
    circleClip.addEventListener(MouseEvent.CLICK,clickCircle);
    if (circleCount != 0){
        moveCircle(parentCircle,circleClip,xPos,yPos);
    }
    circleCount++;
}

Answer 1

The event listener is registered only to one object, but it receives the click events from its children, because MouseEvents bubble up in the display list (i.e. they are forwarded upwards in the hierarchy), so each respective parent object will receive the event, even the stage.

To stop this from happening, you have to explicitly stop propagation of the event. ActionScript events have two methods for this:

stopPropagation

==> stops the event from being received in later execution nodes (i.e. other objects after the currentTarget , but allows other listeners within the same object to fire.

stopImmediatePropagation

==> stops the event at the moment it is received, regardless of who else is listening.

Unless you are going to do other things than what’s in your code, both of those should work fine. So in your clickCircle handler, add one line:

function clickCircle(e:MouseEvent):void {

    // --- This should stop the event from bubbling up in the display list
    e.stopPropagation();

    var thisCircle = e.target;