问题:点击第三级元素,结果一二级元素也影响了!
解决方案:
事件监听时需要多设置一个参数false,而true意味着事件在所有过程传递也是默认的值。
p0.addEventListener(MouseEvent.CLICK, p0_clickHandler, false);
每个事件都需要防止冒泡
event.stopPropagation();
所有代码如下:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="application1_creationCompleteHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.FlexEvent; protected function btn0_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("btn0","msg"); } protected function btn1_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("btn1","msg"); } protected function btn2_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("btn2","msg"); } protected function p0_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("p0_clickHandler","msg"); event.stopPropagation(); } protected function p1_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("p1_clickHandler","msg"); event.stopPropagation(); } protected function p2_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub Alert.show("p2_clickHandler","msg"); event.stopPropagation(); } protected function application1_creationCompleteHandler(event:FlexEvent):void { // TODO Auto-generated method stub p0.addEventListener(MouseEvent.CLICK, p0_clickHandler, false); p1.addEventListener(MouseEvent.CLICK, p1_clickHandler, false); p2.addEventListener(MouseEvent.CLICK, p2_clickHandler, false); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Panel id="p0" width="900" height="600" title="一级"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Panel id="p1" width="600" height="300" title="二级"> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Panel title="三级" id="p2" width="300" height="150"> <s:Button id="btn2" click="btn2_clickHandler(event)" label="btn2"/> </s:Panel> <s:Button id="btn1" click="btn1_clickHandler(event)" label="btn1"/> </s:Panel> <s:Button id="btn0" click="btn0_clickHandler(event)" label="btn0"/> </s:Panel> </s:Application>