Mouse event stops working with image

[quee1875]

Hi,
Hopefully a quick (but mysterious!) problem. The following very short page works perfectly until line55 is added ("button.addChild(img);"). I have no idea why.

I have already tried renaming the variables, and creating "button1" and "button2" objects (instead of reassigning "button").

Please help. Thank you, and much appreciated!

FYI If you cannot see the code below, the page can be found at: http://bit.ly/UDZVB7

<title>EaselJS button problem</title> <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <script> var stage, output;

    function init() {
        canvas = document.getElementById("tileCanvas");
        stage = new createjs.Stage(canvas);
        stage.mouseMoveOutside = true; 

        var rect, label, button;

        // Create first button
        button = new createjs.Container();
        button.name = "button_1";
        button.x = 50; button.y = 30;
        button.onClick = handleClick;

        rect = new createjs.Shape();
        rect.name = "rectangle_1";
        rect.graphics.beginFill("green").drawRoundRect(0, 0, 180, 50, 10);

        label = new createjs.Text("click me (1)", "bold 18px Arial", "#FFFFFF");
        label.textAlign = "center";
        label.textBaseline = "middle";
        label.x = 180/2; label.y = 50/2;

        button.addChild(rect, label);
        stage.addChild(button);

        // Create second button
        button = new createjs.Container();
        button.name = "button_2";
        button.x = 300; button.y = 30;
        button.onClick = handleClick;

        rect = new createjs.Shape();
        rect.name = "rectangle_2";
        rect.graphics.beginFill("green").drawRoundRect(0, 0, 180, 50, 10);

        label = new createjs.Text("click me (2)", "bold 18px Arial", "#FFFFFF");
        label.textAlign = "center";
        label.textBaseline = "middle";
        label.x = 180/2; label.y = 50/2;

        button.addChild(rect, label);

            // Add image
            var img = new createjs.Bitmap("http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg");
            img.x = 5; img.y = 5;
            /* Add this line to recreate problem */
            // button.addChild(img);
            /*************************************/

        stage.addChild(button);


        createjs.Ticker.addListener(stage);
        stage.update();
    }

    function handleClick(evt) {
        alert("Clicked on: " + evt.target.name);
    }
</script>