添加 tween.js 后按钮单击事件不会触发答案

【问题标题】：Button click event wont fire after adding tween.js添加 tween.js 后按钮单击事件不会触发
【发布时间】：2016-02-05 16:22:04
【问题描述】：

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

 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();
                }

【问题讨论】：

标签： javascript jquery html createjs tween

【解决方案1】：

与您之前报告的问题类似，这是由于您的 hitArea。回想一下，hitArea 的位置是基于相对于其目标的。因此，例如，如果您在[0,0] 处绘制一个圆圈，并将其移动到[0,100]，则hitArea 应始终为{x=0, y=0}。如果你也偏移了 hitArea，它的 x/y 将被添加到目标的位置。

因为你正在补间显示框的位置，并且也将它用作hitArea，所以当你改变x/y时，hitArea将始终添加到位置。

x=0, y=0: hitArea 在[0,0]
x=100, y=0: hitArea 在[200,0]
x=200, y=100: hitArea 在[400, 200]

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

这里是your demo，hitArea 为空。我添加了一个光标，这样你就可以看到 hitArea 在哪里。

这是simplified demo。您可以将鼠标滚动到圆圈右下方的区域以查看 hitArea 的位置。

【讨论】：