Flex中通过获取鼠标所在的X、Y坐标进行事件分配

      前言：这是本人学习的结果，欢迎转载，欢迎交流，但转载务必给出本文章的链接地址：http://blog.csdn.net/youqishini/article/details/7024738，要不然......小心......小心......木小JJ......

       本人在工作的过程中，遇见这么一个难题：测试的要求在这个panel上添加一个返回按钮，可是问了几个同事也无法在这个panel上直接添加一个按钮。如果直接给这个panel添加一个click事件，那么，将导致鼠标只要点击这个panel的任何部位都将触发这个click事件，显然这个icon添加的没有任何意义，不是我们想要的结果。

      时间在一分一秒的过去，本人在翻看Flex的api时，发现可以获取鼠标的X、Y的坐标，于是我灵机一动，我可不可以获取这个icon的x轴的范围与Y轴的范围呢？然后给这个icon无形中划了一个“矩形”作用域，然后在这个作用域里派发事件！

      事实证明我的猜想是正确的！下面我将详细展示我的这个思路。

      首先建一个如下图所示的图形，很简单，我就不多说了：

      

     好了，下面来开始我们这次奇妙的探索！

 

     我们分别获取图片的X轴的范围，方法如下所示：

 <span style="font-size:18px;">var mousex:int=back.mouseX;
 Alert.show(mousex.toString(),"X轴坐标");</span>

      当你点击Icon的时候会告诉你测的X轴最左边的值，如下所示：

    同理按照这样测试，取得Icon的X轴的取值范围为：10~17,。同理，按照下面的方法，依次获得Y轴的取值范围为7~17.这个取值范围是相对于Panel来说的，与窗口的大小、位置等无关：

 var mousey:int=back.mouseY;
 Alert.show(mousey.toString(),"Y轴坐标");

好了，给ICON派发事件，如下所示：

 import mx.controls.Alert;
             [Bindable]
             private varcount:int=0;  //将点击次数绑定
             protected functionback_clickHandler(event:MouseEvent):void
             {
                 // TODOAuto-generated method stub
                 varmousex:int=back.mouseX;    //获取鼠标的X轴值
                 varmousey:int=back.mouseY;    //获取鼠标的Y轴值
                 if(mousex>=10&&mousex<=17&&mousey>=7&&mousey<=17){   //将这个事件局限在这个ICON所在的位置
                 count++;
                 mess.text="你已经点击了ICON"+count+"次！";
                 }
             }

这个事件是只有当你点击这个ICON所在的区域时才派发这个事件，运行结果如下所示：

下面给出完整的MXML文件，供参考:

 <?xml version="1.0" encoding="utf-8"?>
 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

     <fx:Script>
         <![CDATA[
             import mx.controls.Alert;
             [Bindable]
             private var count:int=0;  //将点击次数绑定
             protected function back_clickHandler(event:MouseEvent):void
             {
                 // TODO Auto-generated method stub
                 var mousex:int=back.mouseX;    //获取鼠标的X轴值
                 var mousey:int=back.mouseY;    //获取鼠标的Y轴值
                 if(mousex>=10&&mousex<=17&&mousey>=7&&mousey<=17){   //将这个事件局限在这个ICON所在的位置
                 count++;
                 mess.text="你已经点击了ICON"+count+"次！";
                 }
             }
         ]]>
     </fx:Script>

     <fx:Declarations>
         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
     </fx:Declarations>
     <mx:Panel id="back" titleIcon="@Embed(source='images/pageBar/pre.jpg')" click="back_clickHandler(event)" title="Flex中通过获取鼠标所在的X、Y坐标进行事件分配" titleBackgroundSkin="@Embed(source='images/toolbar/title.jpg')"
               width="500" height="200" left="100" top="100">
         <mx:Text id="mess" width="250" height="100"  top="10" left="10" fontSize="18" text="请点击Icon！" />
     </mx:Panel>
 </s:Application>

好了，看着很简单，却可以实现这么大的功能。特别说明的是，Panel的icon和titleIcon属性好像只出现在Flex3中，Flex4中好像没有这两个属性。不过学会了思路可以融会贯通，希望能帮助你！

 

工作的经验在于积累，这是我的工作体会，如果你有更好的方法，欢迎交流！