hitArea on a button component

[ryryguy]

I'm trying to set a custom hit area on a button component and it doesn't seem to work.

I have a symbol which contains a Button component instance "button" plus a sprite instance "modelstage". It looks like this:

public class StageButton extends MovieClip
{
private var hitAreaMask:Sprite;

public function StageButton()
{
hitAreaMask = new Sprite();
hitAreaMask.graphics.beginFill(0xFF0000);
hitAreaMask.graphics.drawRect(modelstage.x, modelstage.y, modelstage.width, modelstage.height);
hitAreaMask.graphics.drawRect(button.x, button.y, button.width, button.height);
hitAreaMask.graphics.endFill();
hitAreaMask.mouseEnabled = false;

addChild(hitAreaMask);
hitAreaMask.visible = false;

button.hitArea = hitAreaMask;
}
}

What I'm trying to do is get the button component to respond to mouse events for its own area plus the modelstage area. But it doesn't work. It only seems to get the mouse events for its own area - what it would get if it had no mask.

If you comment out the line where the hitAreaMask is added as a child, then the button component gets no mouse events at all.

Any ideas?