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

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>

 

评论

1 楼 zhengshina5 2008-09-08  

对嘛写的？