事件的流转控制

来源：互联网发布：网络综合布线工程编辑：程序博客网时间：2024/04/30 05:22

FLEX是基于事件驱动的,在一个复杂的模型中事件的流转也会经常给人以困扰.这里用一个简单的小例子,说明一下,阻塞事件,以及跨越事件广播的两个小方法.

这个小例子中,是一个panel里放了一个button,panel和button都有对应的click事件,默认情况下,是点击Button时,button和Panel的事件都会同时响应的.但现在我们有这样两种需求:

1:点击Button时,要求响应Panel的事件,Button的事件不响应;
2:点击Button时,要求响应Button的事件,Panel的事件不响应;

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
    layout="vertical" creationComplete="initApp();" backgroundColor="black">   
    <mx:Style source="event.css"/>   
<mx:Script>   
    <![CDATA[   
           
        private function initApp():void{   
            button.addEventListener(MouseEvent.CLICK,buttonClickHandler,true);   
            mypanel.addEventListener(MouseEvent.CLICK,panelClickHandler);   
               
            mypanel1.addEventListener(MouseEvent.CLICK,panel1ClickHandler);   
            button1.addEventListener(MouseEvent.CLICK,button1ClickHandler);   
        }   
           
        private function panelClickHandler(event:MouseEvent):void{   
            msg1.text="panel click!";   
        }   
           
        private function buttonClickHandler(event:MouseEvent):void{   
            msg2.text="button click!";   
        }   
           
        private function panel1ClickHandler(event:MouseEvent):void{   
            msg3.text="panel click!";   
            msg4.text="";   
        }   
           
        private function button1ClickHandler(event:MouseEvent):void{   
            msg3.text="";   
            msg4.text="button click!";   
            event.stopPropagation();   
        }   
           
        private function doubleClickHanlder(event:MouseEvent):void{   
            msg1.text="";   
            msg2.text="";   
            msg3.text="";   
            msg4.text="";   
        }   
           
        [Bindable]   
        [Embed(source="thumb.jpg")]   
        private var butIcon:Class;   
           
    ]]>   
</mx:Script>   
<mx:Label text="任意处双击,清除响应结果...." color="white" />   
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" doubleClickEnabled="true" doubleClick="doubleClickHanlder(event);">   
    <mx:Panel width="300" height="300" id="mypanel"  horizontalAlign="center" verticalAlign="middle" title="只响应Panel事件:">   
        <mx:Button id="button" icon="{butIcon}" labelPlacement="bottom" label="click me" />   
        <mx:ControlBar>   
            <mx:HBox>   
                <mx:TextInput id="msg1" width="130"/>   
                <mx:TextInput id="msg2" width="130"/>   
            </mx:HBox>   
        </mx:ControlBar>   
    </mx:Panel>   
       
        <mx:VRule height="100%"/>   
    <mx:Panel width="300" height="300" id="mypanel1"  horizontalAlign="center" verticalAlign="middle" title="只响应Button事件:">   
        <mx:Button id="button1" icon="{butIcon}" labelPlacement="bottom" label="click me" />   
        <mx:ControlBar>   
            <mx:TextInput id="msg3" width="130"/>   
            <mx:TextInput id="msg4" width="130"/>   
        </mx:ControlBar>   
    </mx:Panel>   
    </mx:HBox>   
</mx:Application> 