CODEWITHSUNDEEP
addeventlistenereaseljs
Pauli Laine
Pauli Laine

Reputation: 1

Easeljs addEventListener do not work when bitmap added to stage

I do not understand, why eventlistener (copied from demo) does not work, If I add an bitmap to stage. It seems that bitmap causes problem, because if I add another circle etc. the click works fine.

See example:

    <!DOCTYPE html>
<html>
<head>
    <title>EaselJS demo: Simple animation</title>
    <link href="../_shared/demo.css" rel="stylesheet" type="text/css">
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script>    
        var stage, circle;
        var counter = 0;
        var ticounter = 0
        var images = []
        var mytext = 'kk';
        var lepakko;
        var mx = 0;
        function init() {
            stage = new createjs.Stage("demoCanvas");

            var circle = new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(0, 0, 50);
            circle.x = 500;
            circle.y = 500; 

            stage.addChild(circle);
            stage.update();
            lepakko = new createjs.Bitmap("halloween-bat.png");

            //Click works, if line below is commented out, why?
            //stage.addChild(lepakko);



            circle.addEventListener("click",circle_event);
            stage.update();
        }

        function circle_event(event) {
            alert("clicked");
            };
    </script>
</head>
<body onLoad="init();">
    <canvas id="demoCanvas" width="700" height="700">
        alternate content
    </canvas>
</body>
</html>

Upvotes: 0

Views: 1946

Answers (1)

Matt Sergej Rinc
Matt Sergej Rinc

Reputation: 565

The click should not work by default. EaselJS library needs explicit enabling of the mouseover event. You need to add:

stage.enableMouseOver(20);

after creating the stage. To change the cursor to a pointer when it's over the object there is a property in EaselJS called cursor:

// doesn't work, even if a function is decleared outside
// circle.addEventListener("mouseover", function() { document.body.style.cursor = "pointer"; });
// this works
circle.cursor = "pointer";

Method enableMouseOver is documented on EaselJS website. Do note that listening to mouseover and other events in EaselJS is a lot more demanding for a web browser.

Upvotes: 1

Related Questions