添加补间.js后不会触发按钮单击事件

Button click event wont fire after adding tween.js

本文关键字:按钮 单击 事件 js 添加      更新时间:2023-09-26

当我添加代码行以补间显示框时,单击事件将不再触发。我的控制台中没有收到任何错误。如何解决我的问题?我做错了什么?

 createjs.Tween.get(directionsbox, { loop: false }).to({ x:800, y: 650 }, 4000)

完整代码

  var directionsbox = new createjs.Container();
                displaybox = new createjs.Shape();
                displaybox.graphics.beginFill("#D8D8D8").drawRoundRect(0, 0, 800, 570, 2);
                displaybox.name = "DirectionsBox";
                displaybox.x = -800;
                displaybox.y = -650;
                var label = new createjs.Text("'Congratulations!  'n 'nYou have Completed a three levels." + "'n 'nYour score: " + totalScoresFromAllLevels + "'n 'nYour sccore was submited to the Arcade. 'n'n'nPlay again? Click here.", "bold 20px Arial", "#000");
                label.textAlign = "left";
                label.lineWidth = 540;
                label.y = displaybox.y + 5;
                label.x = displaybox.x + 10
                directionsbox.addChild(displaybox, label);
                self.stage.addChild(directionsbox);
                createjs.Tween.get(directionsbox, { loop: false }).to({ x:800, y: 650 }, 4000)
                var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, displaybox, "hit");
                helper.y = displaybox.y;
                helper.x = displaybox.x + 275
                displaybox.addEventListener("click", handleClick);
                function handleClick(event) {
                    console.log("Clicking it");
                    createjs.Sound.play("click");
                    self.stage.removeChild(directionsbox);
                    visitedUpdateScoreFunction = false;
                    incrimentLevels();
                    //initializeGame();
                    self.stage.removeAllChildren();
                    gameData.Terms = shuffle(gameData.Terms);
                    GamehasEnded = true;
                    addBackground();
                    initializeGame();
                }

与您之前报告的问题类似,这是由于您的命中区域。如果您还记得,命中区域是相对于其目标定位的。举个例子,如果你在[0,0]处画一个圆,并将其移动到[0,100],则命中区域应始终{x=0, y=0}。如果同时偏移命中区域,则它的 x/y 将添加到目标的位置。

由于您要补间显示框的位置,并将其用作命中区域,因此当您更改 x/y 时,命中区将始终添加到该位置。

  • x=0, y=0 : 命中区在[0,0]平局
  • x=100, y=0:命中区在[200,0]抽签
  • x=200, y=100 : 命中区在[400, 200]抽签

您可以通过使用 null 作为 hitArea(它将使用自身(或克隆显示框并将 x 和 y 设置为 0 来轻松解决此问题。

这是您的演示,带有空命中区域。我添加了一个光标,以便您可以看到命中区域的位置。

这是一个简化的演示。您可以将鼠标悬停在圆圈右下角的区域上以查看命中区域的位置。