Button click event wont fire after adding tween.js

Question

When I add the line of code to tween my display box the click event will not fire anymore. I get no errors in my console. How do I fix my issue? What did I do wrong?

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

full code

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

Answer 1

Similar to an earlier issue you reported, this is due to your hitArea. If you recall, the hitArea is positioned based relative to its target. So for example, if you draw a circle at [0,0], and move it to [0,100], the hitArea should always be {x=0, y=0}. If you offset the hitArea as well, it's x/y will be added to the target's position.

Because you are tweening the position of the displaybox, and also using it as the hitArea, when you change the x/y, the hitArea will always be added to the position.

• x=0, y=0: hitArea draws at [0,0]
• x=100, y=0: hitArea draws at [200,0]
• x=200, y=100: hitArea draws at [400, 200]

You can solve this easily by using null as the hitArea (it will use itself), or cloning the displaybox, and setting the x and y to 0.

Here is your demo, with a null hitArea. I added a cursor so you can see where the hitArea is.

Here is a simplified demo. You can rollOver the area to the lower right of the circle to see where the hitArea is.