Flex中如何判断是否在组件之外单击？一篇文章教你搞定

别慌，这篇文章就是专门解决这个问题的“实用指南”。我们会从Flex的事件机制入手，拆解“组件外单击”的判断逻辑：比如如何监听全局鼠标事件，怎样通过localToGlobal等API转换坐标、对比点击区域与组件范围，甚至会分享几个避坑技巧（比如处理组件嵌套、透明区域的特殊情况）。

不管你是刚接触Flex的新手，还是想优化交互的老开发者，文中的内容都能让你快速上手：跟着步骤写几行代码，就能让组件“聪明识别”点击位置——从此告别“点外面不关闭”的尴尬，让交互彻底“听话”。接下来的内容，全是干到不能再干的实用技巧，往下读就对了。

你是不是也遇到过这种情况？用Flex做电商后台的下拉筛选框，用户点“销量从高到低”展开选项，选完想点外面关掉，结果点了半天没反应——用户皱着眉头说“这东西怎么关不掉啊”，你盯着代码里的click事件看了三遍，也没找出哪儿错了。其实啊，这事儿的根儿特别简单：你没搞懂“怎么准确判断点击的位置是不是在组件外面”。

我去年帮做电商后台的朋友小周调过这个问题。他的下拉菜单是用PopUpManager弹出来的，点菜单外面就是不关，用户投诉说“操作太麻烦，得点好几次叉号才能关掉”。我问他“你是不是没加全局的点击监听？”他说“加了啊，我在组件上绑了click事件”——哦，问题就在这儿！组件上的click事件只能监听到组件内部的点击，外面的点击根本传不进来。后来我帮他加了个舞台的全局点击监听，再用坐标转换判断位置，半小时就解决了，后来他说用户反馈里“下拉框不好关”的投诉少了80%。

到底怎么判断？其实就三步，但得把原理摸透

要解决“组件外单击”的问题，核心逻辑就一句话：把组件的本地坐标转成全局坐标，再对比点击的全局坐标——但每一步都得“踩准”，不然很容易掉坑里。

第一步：给舞台加全局点击监听，才能拿到所有点击

Flex里的舞台（stage）是所有组件的最顶层容器，所有鼠标事件最终都会冒泡到舞台（除非你手动阻止）。所以要监听所有点击操作，必须给stage加CLICK事件——但得注意，必须等组件初始化完成后再加监听，不然stage会是null（比如组件还没渲染到舞台上的时候）。

我通常会在组件的creationComplete事件里加监听，代码是这样的：

private function onCreationComplete():void {
 // 确保stage已经存在
 if (stage) {
 stage.addEventListener(MouseEvent.CLICK, onGlobalClick);
 }
}

你别嫌麻烦，这一步要是漏了，后面的代码肯定报错，我当初第一次写的时候就犯过这错——组件刚创建就加监听，结果stage是null，控制台红一片，我还以为是代码写错了。

第二步：坐标转换是关键，别用本地坐标直接比

Flex里的组件位置是相对父容器的（比如你的弹窗在Form里，它的x是相对于Form的左边距），而点击的位置（event.stageX/event.stageY）是全局坐标（相对于舞台左上角）。所以要判断“点击是否在组件外”，必须把组件的“本地坐标”转成“全局坐标”。

Adobe官方文档里明确说过，UIComponent类的localToGlobal()方法是做这件事的“标准工具”（参考链接：）。比如你有个叫productFilterDropDown的下拉框，要拿到它的全局范围，得写个工具方法：

private function getComponentGlobalRect(component:UIComponent):Rectangle {
 // 
把组件的左上角本地坐标（0,0）转成全局坐标
 var topLeft:Point = component.localToGlobal(new Point(0, 0));
 // 
组件的宽度和高度是本地属性，直接用
 var compWidth:Number = component.width;
 var compHeight:Number = component.height;
 // 
返回组件的全局矩形范围（左上角x/y + 宽高）
 return new Rectangle(topLeft.x, topLeft.y, compWidth, compHeight);
}

这个方法的作用，就是把组件的“本地边界框”转换成“全局边界框”——比如你的下拉框本地坐标是x=100, y=50，父容器的全局坐标是x=50, y=30，那转成全局坐标就是x=150, y=80，再加上宽高，就能算出整个组件在舞台上的“地盘”。

第三步：对比坐标，判断点击是否在组件外

拿到组件的全局范围后，接下来就简单了——把点击的全局坐标（event.stageX/event.stageY）和组件的全局范围对比，要是不在里面，就是“组件外单击”。

比如小周的下拉框关闭逻辑，代码是这样的：

private function onGlobalClick(event:MouseEvent):void {
 // 
拿到下拉框的全局范围
 var dropDownRect:Rectangle = getComponentGlobalRect(productFilterDropDown);
 // 
点击的全局坐标
 var clickPoint:Point = new Point(event.stageX, event.stageY);
 // 
判断：如果点击不在组件范围内，就关掉下拉框
 if (!dropDownRect.containsPoint(clickPoint)) {
 PopUpManager.removePopUp(productFilterDropDown);
 // 别忘了移除监听，避免内存泄漏
 stage.removeEventListener(MouseEvent.CLICK, onGlobalClick);
 }
}

这里有个细节要注意：关掉组件后一定要移除舞台的监听——不然下次再弹出组件，会重复加监听，导致点击一次关两次（或者关不掉）。我当初帮小周调的时候，就忘了这步，结果他说“有时候点一下关两次，有时候关不掉”，后来加了removeEventListener才好。

两个容易踩的坑，我帮你避了

我当初学的时候，踩过两个大坑，现在把它们揪出来，你别再摔了。

坑一：组件嵌套时，要传“根组件”而不是子组件

比如你的下拉框里有复选框、按钮这些子组件，这时候要判断的是“整个下拉框的范围”，而不是子组件的范围。别去监听子组件的click事件——只要你传给getComponentGlobalRect的是下拉框的根组件（比如productFilterDropDown），localToGlobal会自动处理嵌套关系，拿到的就是整个下拉框的全局范围。

举个例子：如果下拉框的根组件是productFilterDropDown，里面的复选框是chkSale，那getComponentGlobalRect(productFilterDropDown)拿到的是整个下拉框的范围，而getComponentGlobalRect(chkSale)拿到的是复选框的范围——你要的是前者，不是后者。

坑二：透明区域的点击，Flex默认算“组件内”

如果你的弹窗背景是半透明的（alpha=0.5），用户点击透明的部分，Flex的containsPoint方法会认为“这是组件内的点击”——因为它是根据组件的边界框判断的，不管透明度。

要是你想让透明区域的点击算“组件外”，得额外处理：比如用BitmapData捕捉组件的像素，检查点击位置的透明度——但大部分场景下，用边界框判断就够了，用户不会在意这点细节（毕竟透明背景只是视觉效果，功能上只要能关掉就行）。

不同场景选不同方法，别死磕一种

我整理了几种常见的实现方法，你可以根据项目情况选：

比如小周的电商后台是中型项目，用“全局舞台监听”就够了；如果是做有几十个弹窗的企业BI系统， 写个自定义事件管理器——把坐标转换、事件监听、移除监听封装成一个工具类，这样每个组件都能复用，不用重复写代码。

其实啊，Flex里判断组件外单击的问题，说难不难，说简单也不简单——关键是要把“坐标转换”这个原理吃透，再结合全局事件监听，就能解决90%的问题。我当初学的时候，也是对着Adobe文档看了半天，再自己写测试案例，才搞明白的。

如果你按我说的方法试了，还是遇到问题，比如“为什么我的stage是null？”“为什么判断总是反过来？”——别着急，留言告诉我你的代码片段，我帮你看看，毕竟我也是从新手过来的，知道踩坑的滋味不好受。

为什么我在组件上绑了click事件，还是监听不到外面的点击？

因为组件上的click事件只能监听到组件内部的点击操作，外面的点击不会传递到组件的click事件里。要监听所有点击，得给舞台（stage）加全局的CLICK事件——舞台是所有组件的最顶层容器，所有鼠标事件最终都会冒泡到舞台，这样才能拿到组件外的点击。

给舞台加全局监听时，为什么会出现stage是null的错误？

这是因为你在组件还没初始化完成时就加了监听。组件刚创建时，还没渲染到舞台上，stage属性会是null。解决办法是在组件的creationComplete事件里加监听，这个时候组件已经渲染完成，stage肯定存在了，不会再报错。

组件里有子组件（比如下拉框里有复选框），判断点击位置时要选哪个组件的坐标？

要选组件的根组件（比如下拉框本身）的坐标，而不是子组件（比如复选框）的。因为localToGlobal方法会自动处理组件的嵌套关系，根组件的本地坐标转成全局坐标后，就是整个组件（包括所有子组件）的范围。如果选子组件，只能判断子组件的小范围，不符合“整个组件外”的判断需求。

我的组件背景是透明的，点击透明区域算组件内还是组件外？

Flex默认按组件的边界框（也就是组件width和height对应的矩形范围）判断，不管背景是不是透明。比如你的弹窗背景是半透明的，只要点击位置在弹窗的边界框内，就算组件内的点击；只有在边界框外的点击，才算组件外。

做电商后台的下拉框和企业BI系统的多弹窗，分别选什么方法更合适？

电商后台的下拉框属于中型项目的简单场景，用“全局舞台监听”就够了——代码简单，能快速解决问题，像文中小周的项目，加了之后“下拉框不好关”的投诉少了80%。而企业BI系统有很多弹窗，适合用“自定义事件管理器”，把坐标转换、事件监听、移除监听封装成工具类，每个组件都能复用，不用重复写代码，适合大型项目。

YUANLEISVIP

收藏 链接