常用事件方法及技巧(二) -- MouseEvent(鼠标事件)-阿里云开发者社区

开发者社区> 余二五> 正文

常用事件方法及技巧(二) -- MouseEvent(鼠标事件)

简介:
+关注继续查看

      先说明一下,我并不会把所有的内容都写出来,只列我认为有必要讲解一下的内容。如果要了解全部内容,请参看Flash自带的帮助文件。该系列文章都是按照这个思路写的。

      先说一个本人觉得很实用的通用方法:toString()。基本上所有的事件都带有这个方法,不肯定的时候就trace(event.toString())看一下,会发现内容比帮助文档还要全。囧一个。
 
      下面进入正题,今天讲的是MouseEvent(鼠标事件)。
 
      一、MOUSE_OVER、MOUSE_OUT和ROLL_OVER、ROLL_OUT的区别是什么?
 
      唯一的区别就是:MOUSE_OVER、MOUSE_OUT采用的是冒泡机制;而ROLL_OVER、ROLL_OUT采用的是非冒泡机制(关于冒泡机制的讲解请详细看我上一篇文章)。所以如果你非常习惯AS2编程,可以使用ROLL_OVER、ROLL_OUT,和原来的没什么区别。但我建议你还是习惯冒泡机制,毕竟这个是AS3的指导方向。
 
      同时,MouseEvent的事件中,也只有ROLL_OVER、ROLL_OUT这两个采取的还是非冒泡机制。
 
      下面我给出一个比较区别的例子,但不做很具体的说明了:

      

      如图所示,整个图形是一个MC,实例名为t1。里面的粉红色框为t1内的一个MC,实例名为t2。
 
       (1) 在第一帧写入代码,给两个MC都增加侦听如下:
      function p1(event:MouseEvent):void
      {
          trace("t1");
      }
      t1.addEventListener(MouseEvent.ROLL_OUT, p1);
 
      function p2(event:MouseEvent):void
      {
          trace("t2");
      }
      t1.t2.addEventListener(MouseEvent.ROLL_OUT, p2);
 
      编译该段代码,当鼠标从最左边沿中间移动,最终从右边移出。屏幕输出:
      t2
      t1
 
      (2)代码还是上面,仅仅是把MouseEvent.ROLL_OUT修改为MouseEvent.MOUSE_OUT,编译后同样操作,屏幕输出:
      t1
      t2
      t1
      t1
 
      说明ROLL_OUT采取的是非冒泡机制,而MOUSE_OUT采取的是冒泡机制。
 
 
       二、令人困惑的DOUBLE_CLICK:鼠标双击动作
 
      这个动作在AS2.0是没有的,属于AS3.0新加的事件。但是在使用的过程中,却有不少的麻烦问题,让我们一步步分析:
 
      (1)  默认是关闭的,必须手动打开。
      我们在舞台上创建一个MC,实例名为t1,在第一帧写入代码如下:
      function p1(event:MouseEvent):void
      {
          trace("t1");
      }
      t1.addEventListener(MouseEvent.DOUBLE_CLICK, p1);
 
      运行后,发现无效。为什么呢?因为t1没有打开支持鼠标双击,需要在第一行添加代码如下:  t1.doubleClickEnabled = true;现在再运行,可以了吧?
 
      但这个用法和大多的事件是很不相同的。
 
      (2)  我们在t1内再创建一个MC,实例名为t2,然后再运行上述代码。
      问题出现了,在新创建的MC区域,DOUBLE_CLICK事件不响应了。
 
      为什么会发生这样的事情呢?难道因为新创建的t2,doubleClickEnabled为false,所以t1的双击冒泡事件受到t2的影响,冒不出来了吗?...囧
 
      为证明并解决这个问题,我在第二行写入代码如下:
      t1.t2.doubleClickEnabled = true;
      运行后,果然,问题排除。
 
      可有人要问了,那如果我的MC里面包含了许多子MC怎么办?难道要一个个打开?
      那倒也不用那么麻烦,加入下面的代码即可:
      t1.mouseChildren = false;  //t1的子项不支持鼠标动作
 
      但这个给人的感觉就像是打一个补丁...
 
      (3) 诡异的冒泡事件
      我们把代码稍稍修改下,如下所示:
 
      t1.t2.doubleClickEnabled = true;
      trace(t1.doubleClickEnabled)
      function p1(event:MouseEvent):void
      {
          trace("t1");
      }
      t1.addEventListener(MouseEvent.DOUBLE_CLICK, p1);
 
      function p2(event:MouseEvent):void
      {
          trace("t2");
      }
      t1.t2.addEventListener(MouseEvent.DOUBLE_CLICK, p2);
 
      运行后,第二行的trace返回的结果是false,说明t1的双击属性没有打开。
      然后我们在t2区域上方双击鼠标,灵异事件发生了!下面的2个函数均被触发了!
      依次返回t2,t1。
 
      这个究竟是怎么回事呢?我只好从说明上找根源,然后看到这么一段官方说明:“要使 doubleClick 事件发生,它必在以下一系列事件后面:mouseDown、mouseUp、click、mouseDown、mouseUp。 所有这些事件必须共享与 doubleClick 事件相同的目标。”
 
      难道说,是因为DOUBLE_CLICK是由那5个事件组成,而打开t1.t2.doubleClickEnabled,相当于把t2所在区域的限制打开,导致处于该区域范围的t1也无效了吗?
 
      总之,感觉AS3的鼠标双击事件,只是为了解决AS2没有该事件而做的一个半成品,并不能真正意义上称其为一个独立的事件。
 
      以上!









本文转自 windtoto 51CTO博客,原文链接:http://blog.51cto.com/windtoto/372515,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9991 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2495 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9142 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13776 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7322 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4462 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22350 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载