as3.0中如何阻止事件冒泡?
as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mouse_Down事件,要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件,默认是不行的,因为事件冒泡会让Container也响应Mouse_Down事件,示例代码:
package {import flash.display.*;import flash.events.MouseEvent;public class EventTest extends Sprite{public function EventTest(){var _container:Sprite = createRectangle();var _child:Sprite = createRectangle(50,50,0x00ff00);var _sub_child:Sprite = createRectangle(25,25,0x0000ff); _child.addChild(_sub_child);_container.addChild(_child); addChild(_container);_container.y = _container.x = 50;_child.x = _container.width/2-_child.width/2;_child.y = _container.height/2-_child.height/2; _sub_child.x = _child.width/2-_sub_child.width/2;_sub_child.y = _child.height/2-_sub_child.height/2; _container.addEventListener(MouseEvent.MOUSE_DOWN,containerMouseDownHandler); _child.addEventListener(MouseEvent.MOUSE_DOWN,childMouseDownHandler); _sub_child.addEventListener(MouseEvent.MOUSE_DOWN,subChildMouseDownHandler);}private function subChildMouseDownHandler(e:MouseEvent):void{ trace("_sub_child.MOUSE_DOWN");}private function subChildMouseDownHandler2(e:MouseEvent):void{ trace("_sub_child.MOUSE_DOWN_2");}private function childMouseDownHandler(e:MouseEvent):void{trace("_child.MOUSE_DOWN"); }private function containerMouseDownHandler(e:MouseEvent):void{trace("_container.MOUSE_DOWN");} private function createRectangle(width:uint=100,height:uint=100,color:uint=0xff0000):Sprite{var s:Sprite = new Sprite();s.graphics.beginFill(color,1);s.graphics.drawRect(0,0,width,height);s.graphics.endFill();return s;}} }
鼠标点击最小的矩形后,输出如下:
_sub_child.MOUSE_DOWN
_child.MOUSE_DOWN
_container.MOUSE_DOWN
相当于点一个,触发了三个,要想阻止事件冒泡,可以调用e.stopImmediatePropagation()或stopPropagation()方法,即:
private function subChildMouseDownHandler(e:MouseEvent):void{e.stopImmediatePropagation(); //或//e.stopPropagation();trace("_sub_child.MOUSE_DOWN"); }
这样在_sub_Child上点击时,另外二个Sprite就不会响应Mouse_Down事件,但是stopImmediatePropagation方法与stopPropagation有什么区别呢?Adobe总不至于傻到弄二个功能一样的东东吧
官方的解释:
stopImmediatePropagation():void
防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。
stopPropagation():void
防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。
有点绕口, 还是直接来看代码吧,把上面的示例改造一下,让_sub_Child的Mouse_Down事件同时添加二个监听
package {import flash.display.*;import flash.events.MouseEvent;public class EventTest extends Sprite{public function EventTest(){var _container:Sprite = createRectangle();var _child:Sprite = createRectangle(50,50,0x00ff00);var _sub_child:Sprite = createRectangle(25,25,0x0000ff); _child.addChild(_sub_child);_container.addChild(_child); addChild(_container);_container.y = _container.x = 50;_child.x = _container.width/2-_child.width/2;_child.y = _container.height/2-_child.height/2; _sub_child.x = _child.width/2-_sub_child.width/2;_sub_child.y = _child.height/2-_sub_child.height/2; _container.addEventListener(MouseEvent.MOUSE_DOWN,containerMouseDownHandler); _child.addEventListener(MouseEvent.MOUSE_DOWN,childMouseDownHandler);//注意:这里同时添加了二个监听,并设置了优点级(subChildMouseDownHandler2的优先级高于subChildMouseDownHandler1)_sub_child.addEventListener(MouseEvent.MOUSE_DOWN,subChildMouseDownHandler1,false,1);_sub_child.addEventListener(MouseEvent.MOUSE_DOWN,subChildMouseDownHandler2,false,2);}private function subChildMouseDownHandler1(e:MouseEvent):void{ trace("_sub_child.MOUSE_DOWN_1");}private function subChildMouseDownHandler2(e:MouseEvent):void{ trace("_sub_child.MOUSE_DOWN_2");}private function childMouseDownHandler(e:MouseEvent):void{trace("_child.MOUSE_DOWN"); }private function containerMouseDownHandler(e:MouseEvent):void{trace("_container.MOUSE_DOWN");} private function createRectangle(width:uint=100,height:uint=100,color:uint=0xff0000):Sprite{var s:Sprite = new Sprite();s.graphics.beginFill(color,1);s.graphics.drawRect(0,0,width,height);s.graphics.endFill();return s;}} }
重复刚才的测试,在最小的矩形_sub_Child上点击,输入如下:
_sub_child.MOUSE_DOWN_2
_sub_child.MOUSE_DOWN_1
_child.MOUSE_DOWN
_container.MOUSE_DOWN
然后把subChildMouseDownHandler2改成:
private function subChildMouseDownHandler2(e:MouseEvent):void{e.stopImmediatePropagation();trace("_sub_child.MOUSE_DOWN_2"); }
重复刚才的测试,输出如下:
_sub_child.MOUSE_DOWN_2
再试下stopPropagation方法
private function subChildMouseDownHandler2(e:MouseEvent):void{e.stopPropagation();trace("_sub_child.MOUSE_DOWN_2"); }
这回输出不同了:
_sub_child.MOUSE_DOWN_2
_sub_child.MOUSE_DOWN_1
小结:如果某对象的一个事件同时添加多个监听,stopPropagation将把该事件注册的所有监听处理函数执行完后,再阻止该事件继续向上冒泡;而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行)。
转载于:https://www.cnblogs.com/yjmyzz/archive/2010/07/13/1776761.html
as3.0中如何阻止事件冒泡?相关推荐
- VUE中如何阻止事件冒泡
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡. 如图,在button的点击事件中加上stop,触发addStatus ...
- Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为 以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...
- 阻止事件冒泡 -- 在antd-mobile中,拦截点击picker后默认打开行为
由于公司项目业务逻辑需求,需要在点击picker后判断数据是否为空,再决定是否打开picker:若接口响应数组为空,阻止picker打开. 这里就需要用到jQuery的event.stopImmedi ...
- 处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
- react取消捕获_React中阻止事件冒泡的问题详析
前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始 ...
- 微信小程序中阻止事件冒泡
使用场景 如上图,这是一个活动的列表页面,当用户点击整个列表时,跳转到活动详情页面,当用户点击"去报名"按钮时,跳转到报名页面.但是当我们用"bindtap"事 ...
- angularJS中,怎么阻止事件冒泡
今天有个童鞋问我,ng怎么阻止事件冒泡,我就简单的贴一下代码吧,也不是什么好高大上的问题 转载于:https://www.cnblogs.com/leoshuaige/p/6910646.html
- vue中阻止事件冒泡
vue阻止事件冒泡 问题描述: 使用的element-ui的dialog对话框,在对话框的父组件还有点击事件,点击dialog对话框时也会相应外部父组件的点击事件. <el-dialogtitl ...
- 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)
阻止事件冒泡的方法 前端结构 <div id="app"><div class="father-box" @click="click ...
最新文章
- 电脑修改ip地址方法cmd_Mac系统如何创建用户群组?苹果电脑修改用户名方法
- Linux下获取毫秒级时间差
- 《大话数据结构》第9章 排序 9.6 希尔排序(上)
- java 统计图 mysql_java实现各种数据统计图(转)
- WGho_Setup 雨林木风 一键备份
- day36 Pyhton 网络编程03
- 文档中根元素后面的标记格式必须正确。
- jQuery选择器种类整理
- HDU - 2973威尔逊定理
- 手把手教你用杰奇建小说站
- 安装Vim,提示“Could not get lock......”
- 不一样的Office 365之 —— 使用Delve查看热门文档
- Qt QString to char*
- 华为微博抽奖头目两次中奖:大哥咱玩不起,不玩行不行?
- 如何录制计算机上的音乐,电脑上听歌曲,怎么把它录下来呢
- 99美金和299美金的开发者证书的区别
- 小新面试错题集,http1.0与1.1的区别?
- 吞吐量(TPS)、QPS、并发数、响应时间(RT)说明
- 企业视频远程办公会议通话系统EasyRTC在Windows2012部署运行出现“计算机中丢失VCRUNTIME140.dll”如何解决?
- Excel对多个sheet页进行相同操作