flex_停止事件傳播說明示例;


<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao"
               applicationComplete="initFn()">
    
    <!-- Demo_如何停止事件傳播
        猜想:事件流_事件觸發順序
            首先被觸發的是按鈕裏邊添加的監聽器(在MXML中添加),接着是通過addEventListener()添加的監聽器,
        接着事件就冒泡到按鈕父組件HGroup,觸發父組件裏邊的監聽器。
            不過使用event.stopPropagation()或者event.stopImmediatePropagation()都會阻止事件從按鈕冒泡
        到其父組件,兩者的區別就是stopPropagation()函數會在給定組件(按鈕)上的所有其他事件監聽器完成對這個
        事件(比如MouseEvent)的響應之後停止傳播,而stopImmediatePropagation則是直接停止此事件傳播。
    -->
    
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            protected function initFn():void{
                // 添加事件監聽器;
                button.addEventListener(MouseEvent.CLICK, onClick);
                box.addEventListener(MouseEvent.CLICK, onParentClick);
            }
            
            protected function button_clickHandler(event:MouseEvent):void
            {
                Alert.show("MXML click event.", "MXML Event");
                trace("第一個被觸發 Event");
                //event.stopPropagation();    // 事件停止傳播--但是第二個監聽器會觸發;
                event.stopImmediatePropagation();    // 停止傳播--後面所有監聽器都不會觸發;
            }
            
            protected function onClick(event:Event):void{
                Alert.show("AS event.Calling stopPropagation", "AS Event");
                trace("第二個被觸發 Event");

            }
            
            protected function onParentClick(event:Event):void{
                // 事件永遠不會傳播(冒泡)到父組件,不管使用event.stopPropagation()或者event.stopImmediatePropagation()。
                Alert.show("You should never see this alert.", "Parent Event");
                trace("第三個被觸發 Event");
            }
            
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 非可視元素 -->
    </fx:Declarations>
    
    <!--view-->
    <s:HGroup id="box" horizontalCenter="0" verticalCenter="0">
        <s:Button id="button" label="FireEvent" click="button_clickHandler(event)"/>
    </s:HGroup>
    
</s:Application>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章