dragging a container with clickable children as3

Question

I have a container that has children that will need CLICK events registered to them. The container is draggable and the children shouldn't interfere with the drag or be triggered by it.

I'm having a hard time wrapping my head around how to accomplish this. Any help is appreciated.

This is the closest I can come, by removing any click handlers if the object has been moved. This seems messy though

box.addEventListener(MouseEvent.MOUSE_DOWN, dragit);
box.circle.addEventListener(MouseEvent.CLICK, circleclick);


function dragit(e:MouseEvent) 
{
   box.startDrag();
   box.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}


function stopdrag(e:Event) 
{
if(box.x != 0)
    {
        box.circle.removeEventListener(MouseEvent.CLICK, circleclick);
    }
    box.stopDrag();
}

function circleclick(e:MouseEvent):void
{
trace('clicked');
}

Answer 1

Something like the following works for me, you can drag the container from anywhere including the children, I added a suppress click flag to prevent the clicks if the container is dragged from a child you might use that or not depending on your application.

package 
{
    public class Main extends Sprite 
    {

        private var container:Sprite = new Sprite();
        private var suppressClick:Boolean = false;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

            container.graphics.beginFill(0xff0000, 1);
            container.graphics.drawRect(0, 0, 500, 500);
            container.graphics.endFill();
            addChild(container);

            container.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

            var child:Sprite = new Sprite();
            child.graphics.beginFill(0x00ff00, 1);
            child.graphics.drawRect(0, 0, 50, 50);
            child.graphics.endFill();
            child.addEventListener(MouseEvent.CLICK, onChildClick);
            child.x = 100;
            child.y = 100;
            container.addChild(child);


        }

        private function onMouseDown(e:MouseEvent):void 
        {
            suppressClick = false;
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
            stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
            container.startDrag();
        }

        private function onMouseMove(e:MouseEvent):void 
        {
            suppressClick = true;
        }

        private function onMouseUp(e:MouseEvent):void 
        {
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
            stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
            container.stopDrag();
        }

        private function onChildClick(e:MouseEvent):void 
        {
            if(!suppressClick)
                trace("child clicked");
        }

    }

}