How to offset createjs button helpers' hit area?

Question

I'm using a button helper to allow the clicking of a display box and text area. IF you hover over the box with your mouse only about 2/3 of the box is clickable.

And the selected area is allowed outside of the box on the right side. How do I set the clickable area correctly? Just the box is suppose to be clickable

Game Link to see example - grey directions box is on second page of link.

        self.stage.addChild(titleText);
        var directionsbox = new createjs.Container();
        displaybox = new createjs.Shape();
        displaybox.graphics.beginFill("gray").drawRoundRect(0, 0, 550, 350, 8);
        displaybox.name = "DirectionsBox";
        displaybox.x = 125;
        displaybox.y = 120;

        var label = new createjs.Text("\n" + gameData.Description + "\n\n\nDirections  \n \nThere are 3 levels to complete.  \nEach level gets a bit faster.  \nYour high sccore will automataly be submited to the Arcade. \n\n\nClick here to start sorting.", "bold 20px Arial", "#FFFFFF");
        label.textAlign = "center";
        label.lineWidth = 550;
        label.y = displaybox.y;
        label.x = displaybox.x + 275

        directionsbox.addChild(displaybox, label);
        self.stage.addChild(directionsbox);

        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) {
            createjs.Sound.play("click");
            self.stage.removeChild(directionsbox);
            StartInteraction();
        }

Answer 1

The issue with your hitArea is that you are using your instance as it's own hitArea explicitly. HitAreas are meant to automatically position to their content. Because your displaybox has an x/y already set, it is added to the hitArea's position, which has already been positioned relative to your visible displayBox.

In your example, you can just set the hitArea parameter of ButtonHelper to null. This will make the ButtonHelper use the actual visible content as the hitArea, which works fine. If you want to use an external instance, you can clone the DisplayBox, set it's x/y to 0, and use that.

// Just use null
var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, null, "hit");

// Use a new instance
var hitbox = displayBox.clone().set({x:0, y:0});
var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, hitbox, "hit");

Hope that helps.