Question

I have a MovieClip instance which can be moved around the stage using startDrag() and stopDrag(). The instance also has some child MovieClips using addChild(). The parent moves the children when dragging, which is fine. The children have there own startDrag() and stopDrag() which should apply only to the child object, however it also moves the parent and other children. When clicking a child the MouseEvent of the child is being called but so is the parent.

public class Component extends MovieClip {
    private var nodes_array:Array = new Array();

    public function Component() {
        x = 60;
        y = 100;

        nodes_array.push(addChild(new Node(50, 50)));
        nodes_array.push(addChild(new Node(150, 150)));

        addEventListener(MouseEvent.MOUSE_DOWN, startDraggingComponent);
        addEventListener(MouseEvent.MOUSE_UP, stopDraggingComponent);
    }
    private function startDraggingComponent(me:MouseEvent):void {
        this.startDrag();
    }
    private function stopDraggingComponent(me:MouseEvent):void {
        this.stopDrag();
    }


    public class Node extends MovieClip {

    public function Node(x:int, y:int) {
        this.x = x;
        this.y = y;

        addEventListener(MouseEvent.MOUSE_DOWN, startDraggingNode);
        addEventListener(MouseEvent.MOUSE_UP, stopDraggingNode);
    }
    private function startDraggingNode(me:MouseEvent):void {
        this.startDrag();
    }
    private function stopDraggingNode(me:MouseEvent):void {
        this.stopDrag();
    }

Answer 1

In the Node class listener’s you need to call e.stopImmediatePropagation();. That will prevent event from bubbling up to its parent.