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

原作者：菩提树下的杨过
转载出处：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 
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

分类: 12.Flex/Flash/AS3.0

标签: as3, event, 事件冒泡, stopPropagation, stopImmediatePropagation