Question

我不明白，为什么eventlistener（从demo中复制）不起作用，如果我将一个位图添加到舞台上。似乎位图会导致问题，因为如果我添加另一个圆圈等，则点击工作正常。

参见示例：

    <!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>

Answer 1

默认情况下，点击不起作用。 EaselJS库需要显式启用mouseover事件。你需要添加：

stage.enableMouseOver(20);

创建舞台后。要在光标位于对象上方时将光标更改为指针，EaselJS中有一个名为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";

方法enableMouseOver记录在EaselJS website上。请注意，在Web浏览器中收听EaselJS中的鼠标悬停和其他事件要求更高。

将位图添加到舞台时，Easeljs addEventListener不起作用

1 个答案: