原作者:菩提树下的杨过
转载出处:http://yjmyzz.cnblogs.com 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行)。

作者:菩提树下的杨过
出处:http://yjmyzz.cnblogs.com 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 

as3.0中如何阻止事件冒泡的更多相关文章

  1. vue中click阻止事件冒泡,防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  2. 【转】Flash AS3.0 中的自定义事件

    原文 http://www.cnblogs.com/acpp/archive/2010/10/19/1855670.html package { import flash.events.Event; ...

  3. React阻止事件冒泡的正确打开方式

    需求:点击导航list按钮出现侧弹框,点击空白处弹框消失 问题:绑定空白处的点击事件到document上,但是非空白处的点击也会触发这个点击事件,在react中如何阻止事件冒泡? 解决方法:e.sto ...

  4. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  5. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  6. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  7. 在点击div中的p时,如何阻止事件冒泡?

    今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: < ...

  8. React 中阻止事件冒泡的问题

    在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达 ...

  9. vue2.0阻止事件冒泡

    <!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...

随机推荐

  1. python学习笔记_week20

    note 1.Django请求的生命周期 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 2.路由系统 /index/ -> 函数或类.as_vie ...

  2. centos7 更新yum报错initscripts conflicts with centos-release-7-3.1611.el7.centos.x86_64

    1.centos7的系统的yum 更新系统报错: --> 解决依赖关系完成错误:initscripts conflicts with centos-release-7-3.1611.el7.ce ...

  3. 键值对操作 之 combineByKey

    combineByKey( createCombiner,mergeValue,mergeCombiners,partitioner) combineByKey() 是最为常用的基于键进行聚合的函数. ...

  4. 1. apache如何启动

    进入apache安装目录/bin/底下,用命令:./apachectl start 启动

  5. Flex 画图

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...

  6. JAVA SpringBoot2 整合 JSP视图模板 整合 Ueditor富文本编辑器

    一般涉及到后台管理系统,就少不了富文本编辑器,这个可以图,文,视频混排的高级工具,笔者通过对比,发现目前市场上最好的三方库还当属百度的 ueditor 近年来 SpringBoot 框架可谓越来越火, ...

  7. Django中MEDIA_ROOT和MEDIA_URL

    在django上传图片前端使用动态的配置方法 MEDIA_ROOT 代表着 要上传的路径会和你在models中写的上传的路径进行拼节形成最终文件上传的路径 MEDIA_URL主要就是映射了 在前端使用 ...

  8. VC编译错误,把类误认为是函数

    这段代码是在一个动态库中,我像把这个类导出,于是加上 SC_EXPORTS 宏.class SC_EXPORTS CProtocolCheck{public: CProtocolCheck(void) ...

  9. linux配置sphinx

    1. 配置索引 cd /usr/local/sphinx/etc/ cp sphinx.conf.dist sphinx.conf //备份配置文件,防止改错 vim sphinx.conf 配置文件 ...

  10. 关于php MD5加密 与java MD5 加密结果不一致的问题

    针对PHP不是UTF-8编码导致的问题 public String md5(String txt) {              try{                   MessageDiges ...