Flex中如何判断是否在组件之外单击

昨天在做Flex开发的时候，遇到了这样一种操作，之前也遇到过，那时的办法不是很好，今天又碰上了类似的问题，先看一张图吧!
 
这是系统界面大概的样子，现在的情况是，红色区域是一个窗口、页面、组件这样的，需要在这个组件之外的地方单击就隐藏这个组件，以前的想法很简单，就是通过坐标判断，但是现在这个红色的区域的结构比较复杂，所以不知道有什么样的方式可以解决，后来遇到了一个网友，给了我一段代码，我觉得还不错，我觉得算是技巧性的东西吧！所以分享一下：

首先，在黑色的区域监听单击事件，然后在单击事件的处理函数中通过contains方法判断。代码如下所示：


代码如下:

public functionclickHandler(event:MouseEvent):void
{
if(!红色区域.contains(event.target asDisplayObject) && !绿色区域.contains(event.target as DisplayObject))
{
红色区域.visible = false;
}
}

这段代码，我认为还是比较一种好的解决方案。最开始的想法是通过坐标来判断，然后又冒出了一个想法就是在红色区域上监听鼠标离开，在离开的处理函数中监听单击的事件，但是这种方法好像不好使。于是问了一下网友，就知道了这种方法。

这里还有一个小插曲：我的qq头像是路飞的，很巧合的是帮助我解决问题的是一个索隆头像的网友，解决完问题之后，他还叫了我一声船长，很有趣啊!

赞 (0)

相关推荐

  • Flex中如何判断是否在组件之外单击

    Flex中如何判断是否在组件之外单击

    昨天在做Flex开发的时候,遇到了这样一种操作,之前也遇到过,那时的办法不是很好,今天又碰上了类似的问题,先看一张图吧!  这是系统界面大概的样子,现在的情况是,红色区域是一个窗口.页面.组件这样的,需要在这个组件之外的地方单击就隐藏这个组件,以前的想法很简单,就是通过坐标判断,但是现在这个红色的区域的结构比较复杂,所以不知道有什么样的方式可以解决,后来遇到了一个网友,给了我一段代码,我觉得还不错,我觉得算是技巧性的东西吧!所以分享一下: 首先,在黑色的区域监听单击事件,然后在单击事件的处理函数

  • Flex中TextInput组件设置限制某些字符的输入的方法

    1. 限制某个字符的输入,用符号 ^ 跟上要限制的字符,可跟多个字符 <!-- 限制字符"~"的输入 --> <mx:TextInput id="xxx" restrict="^~" /> <!-- 限制字符"ab"的输入 --> <mx:TextInput id="xxx" restrict="^ab" /> 2. 设置只能输入某些字符,

  • js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • 详解IDEA中SpringBoot整合Servlet三大组件的过程

    Spring MVC整合 SpringBoot提供为整合MVC框架提供的功能特性 内置两个视图解析器:ContentNegotiatingViewResolver和BeanNameViewResolver 支持静态资源以及WebJars 自动注册了转换器和格式化器 支持Http消息转换器 自动注册了消息代码解析器 支持静态项目首页index.html 支持定制应用图标favicon.ico 自动初始化Web数据绑定器:ConfigurableWebBindingInitializer Sprin

  • vue3中轻松实现switch功能组件的全过程

    vue3中轻松实现switch功能组件的全过程

    what 编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了. 而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢? 这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件 以终为始 先来看看我们希望用户是如何使用 Switch 的 用 js 的方式来对比一下: 用户可以通过一个 VSwitch 组件来应用 switch 功能 通过 case 来确定匹配的条件 然后每一个 case

  • Vue3中进行页面局部刷新组件刷新的操作方法

    目录 前言 开始操作 vue2和vue3的区别 vue2 vue3 Vue2和Vue3的钩子函数生命周期对照 步入正题,解决今天的问题 代码 前言 今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态 但是数据已经传送给后端,后端也完成了响应的处理 这个时候我想到了局部刷新,我想vue3是vue2的升级版,那么部分语法应该是支持的才对,经过尝试不是很完美 没有达到自己想要的情况,期间还很多报错 开始操作 vue3的生命周期和vue2的生命周期是完全不

  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作 基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De

随机推荐