[flexcoders] MOUSE_OUT and MOUSE_OVER behaviour when button placed inside another button

[abbor99]

Hi,

I'm working on a composite component that has a header bar implemented as a 
Button.  Within this header Button, I have smaller buttons that show up only 
when the mouse hovers over the header bar.

I do this by hooking into the MOUSE_OUT and MOUSE_OVER events of the header and 
toggling the visibility of the smaller buttons.

I have managed to do all of this and so far so good.  The problem is when the 
mouse hovers above the smaller buttons, it triggers a crazy cycle of MOUSE_OUT 
and MOUSER_OVER events on the header button which cause the smaller buttons to 
blink.

I have tried playing with event propagation and event priorities.  I've also 
tried cursing and banging at the keyboard but nothing is working.  Please help 
make the blinking stop!

                override protected function createChildren() : void
                {
                        super.createChildren();

                        //
                        // Create header
                        //
                        _header = new Button();
                        _header.height = 30;
                        _header.labelPlacement = "right";
                        _header.setStyle("textAlign", "left");
                        _header.addEventListener(MouseEvent.CLICK, 
handleHeaderClick, false, 0, true);
                        _header.addEventListener(MouseEvent.MOUSE_OVER, 
handleHeaderOver, false, 0, true);
                        _header.addEventListener(MouseEvent.MOUSE_OUT, 
handleHeaderOut, false, 0, true);
                        addChild(_header);

                        //
                        // Create header Add button
                        //
                        _headerAdd = new Button();
                        _headerAdd.setStyle("icon", AddIcon);
                        _headerAdd.width = 16;
                        _headerAdd.height = 16;
                        _headerAdd.visible = false;
                        _headerAdd.addEventListener(MouseEvent.CLICK, 
handleHeaderAddClick, false, 0, true);
                        addChild(_headerAdd);

                        _list = new List();
                        _list.setStyle("borderStyle", "none");
                        _list.visible = false;

                        addChild(_list);
                }

                protected function handleHeaderOver(e : MouseEvent) : void
                {
                        if (!_headerAdd.visible)
                        {
                                _headerAdd.visible = true;
                                invalidateDisplayList();
                        }
                }

                protected function handleHeaderOut(e : MouseEvent) : void
                {
                        if (_headerAdd.visible)
                        {
                                _headerAdd.visible = false;
                                invalidateDisplayList();
                        }
                }