0

我不明白，为什么事件监听器（从演示复制）不起作用，如果我在舞台上添加位图。似乎位图会导致问题，因为如果我添加另一个圆圈等，点击效果很好。

参见示例：

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

1 回答 1

1

默认情况下，单击不应起作用。EaselJS 库需要显式启用鼠标悬停事件。您需要添加：

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 网站上。请注意，在 EaselJS 中侦听鼠标悬停和其他事件对于 Web 浏览器的要求要高得多。

于 2014-04-14T20:47:50.797 回答