我需要一个真正的mouseOver

时间:2010-05-20 21:28:07

标签: flex actionscript-3 actionscript flex3 mouseover

好吧,只要你的鼠标实际上在项目上,或者其中一个孩子,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>

1 个答案:

答案 0 :(得分:1)

您可以使用一些属性来完成此任务:

将mouseEnabled mouseFocusEnabled focusEnabled mouseChildren

在'hovered'组件上将它们全部设置为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>