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(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(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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/yjmyzz/p/1776761.html