Why does the roll_out event fire in this code?

I have made this short example to demonstrate some problems I'm having.

<?xml开发者_Go百科 version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Canvas
        id="buttonCanvas"
        x="100" y="100" opaqueBackground="#000000" width="80%" height="300"
        creationComplete="init(event)">
        <mx:Button x="5" y="5"/>
        <mx:Button x="5" y="50"/>

    </mx:Canvas>


    <mx:Script>
    <![CDATA[
        private function init(event:Event):void{
            buttonCanvas.addEventListener(MouseEvent.ROLL_OUT, function(event:Event):void{
                buttonCanvas.opaqueBackground=(buttonCanvas.opaqueBackground==0)? 0x666666:0;
            });         
        }    
    ]]>
    </mx:Script>
</mx:Application>

I don't understand the following:

1. Why don't the percentage or absolute dimensions affect the canvas size?
2. Why does the roll_out event fire when the mouse leaves a button (even when it is still inside the canvas).

I'm going nuts trying to figure this out. Any help would be greatly appreciated!

Maybe you wanted to use backgroundColor style and not opaqueBackground property?

Just glancing at this, I can tell you that the default value for opaqueBackground is null, not 0.