I need a true mouseOver...

Question

Ok, so mouseOver and RollOver, and their respective outs work great as long as your mouse is actually over the item, or one of it's children. My problem is that I may have another UI component "between" my mouse and the item I want to process the mouse/rollover(maybe a button that is on top of a canvas, but is not a child of the canvas). The mouse is still over the component, there's just something else that it's over at the same time.

Any tips or help how to deal with this? Let me know if I'm not being clear enough.

Here is a simplified code example detailing my question copy/paste that into your flex/flash builder and you'll see what I mean: Edit, I just made this more complicated and true to my actual problem, drag slowly, if you move your mouse further than the button in a single frame it kinda breaks, but that is just in this simplified version

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="268" 
                creationComplete="ccInit()">
    <mx:Script>
        <![CDATA[
            private var btnStartX:Number = 10;
            private var btnStartY:Number = 218;
            private var msStartX:Number = 0;
            private var msStartY:Number = 0;


            private function ccInit():void{
                myCanv.addEventListener(MouseEvent.ROLL_OVER,handleRollOver);
                mybutton.addEventListener(MouseEvent.MOUSE_DOWN,startDragOp);
            }
            private function handleRollOver(evt:MouseEvent):void{
                myCanv.setStyle("backgroundAlpha",1);
                myCanv.addEventListener(MouseEvent.ROLL_OUT,handleRollOut);
                mybutton.mouseEnabled = false;
                mybutton.focusEnabled = false;
                mybutton.mouseFocusEnabled = false;
                mybutton.mouseChildren = false;
            }
            private function handleRollOut(evt:MouseEvent):void{
                myCanv.setStyle("backgroundAlpha",0);
                myCanv.removeEventListener(MouseEvent.ROLL_OUT,handleRollOut);
                mybutton.mouseEnabled = true;
                mybutton.focusEnabled = true;
                mybutton.mouseFocusEnabled = true;
                mybutton.mouseChildren = true;
            }
            private function startDragOp(evt:MouseEvent):void{
                btnStartX = mybutton.x;
                btnStartY = mybutton.y;
                msStartX = stage.mouseX;
                msStartY = stage.mouseY;
                mybutton.addEventListener(MouseEvent.MOUSE_MOVE,moveWithMouse);
                mybutton.addEventListener(MouseEvent.MOUSE_UP,endDragOp);
            }
            private function moveWithMouse(evt:MouseEvent):void{
                mybutton.x = btnStartX + stage.mouseX - msStartX;
                mybutton.y = btnStartY + stage.mouseY - msStartY;
            }
            private function endDragOp(evt:MouseEvent):void{
                mybutton.x = 10;
                mybutton.y = 218;
                mybutton.removeEventListener(MouseEvent.MOUSE_MOVE,moveWithMouse);
                mybutton.removeEventListener(MouseEvent.MOUSE_UP,endDragOp);
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="myCanv" x="10" y="10" width="480" height="200" borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF" backgroundAlpha="0">

    </mx:Canvas>
    <mx:Button id="mybutton" x="10" y="218" label="Drag me over above canvas" width="326" height="36"/> 
</mx:Application>

Answer 1

There are a handful of properties you can use to accomplish this:

mouseEnabled mouseFocusEnabled focusEnabled mouseChildren

Set them all to false on the 'hovered' component and the component beneath it should receive the relevant events.

This will prevent you from using the component that exists on top of the one you want to have focus, though.

Added code Sample to demonstrate properties in question

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="226" 
                creationComplete="ccInit()">
<mx:Script>
    <![CDATA[
        private function ccInit():void{
            myCanv.addEventListener(MouseEvent.ROLL_OVER,handleRollOver);
        }
        private function handleRollOver(evt:MouseEvent):void{
            myCanv.setStyle("backgroundAlpha",1);
            myCanv.addEventListener(MouseEvent.ROLL_OUT,handleRollOut);
        }
        private function handleRollOut(evt:MouseEvent):void{
            myCanv.setStyle("backgroundAlpha",0);
            myCanv.removeEventListener(MouseEvent.ROLL_OUT,handleRollOut);
        }
    ]]>
</mx:Script>

<mx:Canvas id="myCanv" x="10" y="10" width="480" height="200" borderStyle="solid" 
           borderColor="#000000" backgroundColor="#FFFFFF" backgroundAlpha="0">

</mx:Canvas>
<mx:Button x="90" y="50" label="Button" width="327" height="100"
           mouseEnabled="false" mouseFocusEnabled="false" focusEnabled="false" mouseChildren="false" />  
</mx:Application>