我需要一个真正的 mouseOver

Question

好的，只要您的鼠标实际上位于该项目或其中一个子项目上，那么 mouseOver 和 RollOver 以及它们各自的输出就可以很好地工作。我的问题是我的鼠标和要处理鼠标/鼠标悬停的项目“之间”可能有另一个 UI 组件（可能是画布顶部的按钮，但不是画布的子项）。鼠标仍在组件上方，同时还有其他东西在上方。

任何提示或帮助如何处理这个问题？如果我不够清楚，请告诉我。

这是一个简化的代码示例，详细说明了我的问题复制/粘贴到您的 flex/flash 构建器中，您会明白我的意思： 编辑，我只是​​让这个更复杂，更符合我的实际问题，慢慢拖动，如果你将鼠标移动得比单帧中的按钮更远，它会中断，但这只是在这个简化版本中

<?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

您可以使用一些属性来完成此操作：

鼠标启用 mouseFocusEnabled 启用焦点 鼠标儿童

在“悬停”组件上将它们全部设置为 false，并且其下方的组件应接收相关事件。

这将阻止您使用存在于您想要获得焦点的组件之上的组件。

添加了代码示例来演示相关属性

<?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>