Defining area for mouse_out/over events which contain buttons

1

Hello All - This should have a really simple answer but I can´t get it to work out:

I want to define an area that when i leave triggers a mouse_out event. however, within this area i want to have a button that does something when clicked. the catch is when i roll over the button i do NOT want the mouse_out event to be triggered.

here is some overly simplified code to make the problem clear:


// draw container
var container:Sprite = new Sprite();
container.addEventListener(MouseEvent.MOUSE_OUT,cout);
container.addEventListener(MouseEvent.MOUSE_OVER,cover);
container.graphics.beginFill(0);
container.graphics.drawRect(0,0,100,100);
container.graphics.endFill()
container.graphics.beginFill(0);
container.graphics.drawRect(50,50,100,100);
container.graphics.endFill()

// draw button
var button:Sprite = new Sprite();
button.graphics.beginFill(0xffffff)
button.graphics.drawRect(100, 100, 30,30)
button.addEventListener(MouseEvent.CLICK,bclick);

// add sprites to stage
container.addChild(button)
addChild(container)


// listeners
function cover(e:MouseEvent):void {
	trace("over container");
}
function cout(e:MouseEvent):void {
	trace("you have left the container");
}
function bclick(e:MouseEvent):void {
	trace("button clicked");
}