• 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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    你不知道的javaScript笔记(7)
    你不知道的javaScript笔记(6)
    你不知道的javaScript笔记(5)
    你不知道的javaScript笔记(4)
    你不知道的javaScript笔记(3)
    你不知道的javaScript笔记(2)
    java 单链表反转
    Java找出两个链表的第一个公共节点
    Java产生死锁的一个简单例子
    Java 中Enum的使用与分析
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1776761.html
Copyright © 2020-2023  润新知