FLEX技巧篇---------事件的流转控制

hacker47

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>