How can I use a dynamically-resized hitArea for an EaselJS DisplayObject?

Question

I'd like to use a hitArea to capture click events in my EaselJS project, but the hitArea Shape I've assigned doesn't seem to be respected.

jsFiddle Example

var stage = new createjs.Stage($("#game")[0]);

// This will be a big button
var container = new createjs.Container();
stage.addChild(container);

// This defines the hit area of the button
var hitArea = new createjs.Shape();
var hitAreaGraphics = hitArea.graphics;
// A 1x1 black square, centered about the origin
hitAreaGraphics.beginFill("#000").drawRect(-0.5, -0.5, 1, 1).endFill();

// Assign the hitArea
container.hitArea = hitArea;
// container.addChild(hitArea);

container.onTick = function() {
    var canvas = container.getStage().canvas;
    container.x = canvas.width / 2;
    container.y = canvas.height / 2;
    container.scaleX = canvas.width;
    container.scaleY = canvas.height;
};
container.onPress = function() {
    alert("Eureka!");
};

// Run the simulation
updater = {
    tick: function() { stage.update(); }
};
createjs.Ticker.addListener(updater);
​

If I add the hitArea shape as a child of the container object, the click events work fine.