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

时间: 2024-09-13 01:13:07

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

js中简单阻止事件冒泡的方法

JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下:  代码如下 复制代码 function cancelBubble(evt) {  // 阻止事件冒泡  if (window.event) {   // Chrome,IE6,Opera   window.event.cancelBubble = true;  } else {   // FireFox 3   evt

JQuery中阻止事件冒泡几种方式及其区别介绍

 JQuery中阻止事件冒泡方式有哪些?本文为大家准备了两种阻止事件冒泡的方式,两种方式的区别在于.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身 JQuery 提供了两种方式来阻止事件冒泡.    方式一:event.stopPropagation();   代码如下: $("#div1").mousedown(function(event){  event.stopPropagation();  });    方式二:return false;  代码如下:

JQuery中阻止事件冒泡几种方式及其区别介绍_jquery

JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

js阻止冒泡及jquery阻止事件冒泡示例介绍_javascript技巧

js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

Jquery阻止事件冒泡 event.stopPropagation_jquery

描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是

AS3.0中Tween类的基础 教程

AS3.0中Tween类的基础 教程 写个关于ActionScript3.0 中的Tween类的小教程吧,还是抛砖引玉,偷摸追赶一下潮流.(个人认为AS3.0是以后支持互动设计的主流技术) 说道Tween类,看字面的意思就是实现补间动画的.在Flash CS3中,Adobe已经为大家开发好了一套可以轻松实现运动效果的类.这套类包位于fl.transition.*中.其实,这些包 中的类效果的原理都是监听ENTER_FRAME事件的.在动画播放时,按帧频改变目标的属性,从而产生动画的效果. 负责动

阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代

利用JQuery阻止事件冒泡_jquery

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>

HtmlElementEventArgs e, e.BubbleEvent 为什么不能阻止事件冒泡??

问题描述 privatevoidwebBrowser1_DocumentCompleted(objectsender,WebBrowserDocumentCompletedEventArgse){webBrowser1.Document.Click+=newHtmlElementEventHandler(Document_Click);}//浏览器事件//此事件在点击页面元素之后会执行多次privatevoidDocument_Click(objectsender,HtmlElementEven