前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >as3.0中如何阻止事件冒泡?

as3.0中如何阻止事件冒泡?

作者头像
菩提树下的杨过
发布2018-01-23 15:54:55
1.5K0
发布2018-01-23 15:54:55
举报

as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mouse_Down事件,要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件,默认是不行的,因为事件冒泡会让Container也响应Mouse_Down事件,示例代码:

代码语言:javascript
复制
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()方法,即:

代码语言:javascript
复制
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事件同时添加二个监听

代码语言:javascript
复制
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改成:

代码语言:javascript
复制
private function subChildMouseDownHandler2(e:MouseEvent):void{
	e.stopImmediatePropagation();
	trace("_sub_child.MOUSE_DOWN_2");
}

重复刚才的测试,输出如下:

_sub_child.MOUSE_DOWN_2

再试下stopPropagation方法

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2010-07-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档