Flex中的stopPropagation（）和stopImmediatePropagation（）之間的區別

Question

我正在Flex中進行事件處理。
我需要停止節點上事件的事件傳播。
我發現stopPropagation()和stopImmediatePropagation()之間沒有區別。

這些功能之間有什么區別嗎？

<?xml version="1.0"?>
<s:Application     
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"
    initialize="init(event);">

    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>

    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import flash.events.MouseEvent;         


            import mx.controls.Alert;

            public function init(e:Event):void {
                var object:Object
                p1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                tw1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                tw1.addEventListener(MouseEvent.MOUSE_UP, showAlert);
                btn.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                btn.addEventListener(MouseEvent.MOUSE_UP, showAlert);               
            }

            private function showAlert(e:Event):void {                              
                trace("stopPropagation !\n" + "Current Target: " + e.currentTarget + "\n"+ "Target: " + e.target + "\n" +"Type: " + e.type);
                //e.stopImmediatePropagation();             
                e.stopPropagation();                                
            }

        ]]>
    </fx:Script>    
    <s:Panel id="p1" title="Stops Propagation">
        <mx:TitleWindow id="tw1" 
                        width="300" 
                        height="100" 
                        showCloseButton="true" 
                        title="Title Window 1">
            <s:Button id="btn" label="Click Me"/>
            <s:TextArea id="ta1"/>
        </mx:TitleWindow>
    </s:Panel>  
</s:Application>

Answer 1

event.stopImmediatePropagation() -完全停止事件。 沒有其他偵聽器會收到該事件的呼叫。

event.stopPropagation() -阻止將事件移動到下一個顯示列表節點，但允許在currentTarget對象上調用偵聽器（如果存在）。

看到稍微修改您的代碼：

<?xml version="1.0"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    initialize="init(event);">

    <fx:Script>
        <![CDATA[
            public function init(e:Event):void {
                var object:Object
                p1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                tw1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                btn.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
            }

            private function showAlert(e:Event):void {
                trace("Event: " + e.type + "; Phase: " + e.eventPhase +"; Target: " + e.target.name + "; Current Target: " + e.currentTarget.name);
            }
        ]]>
    </fx:Script>
    <s:Panel id="p1" title="Stops Propagation">
        <mx:TitleWindow id="tw1"
                        showCloseButton="true"
                        title="Title Window 1">
            <s:Button id="btn" label="Click Me"/>
            <s:TextArea id="ta1"/>
        </mx:TitleWindow>
    </s:Panel>
</s:Application>

輸出：

Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
Event: mouseDown; Phase: 3; Target: btn; Current Target: TitleWindow14
Event: mouseDown; Phase: 3; Target: btn; Current Target: Panel5

首先，在Targeting階段（EventPhase = 2）在Button上接收事件，然后在Bubbling階段（eventPhase = 3）在TitleWindow和Panel上接收事件。

如果您像這樣修改事件監聽器：

private function showAlert(e:Event):void {
                trace("Event: " + e.type + "; Phase: " + e.eventPhase +"; Target: " + e.target.name + "; Current Target: " + e.currentTarget.name);
                trace("stopPropagation()");
                e.stopPropagation();
            }

輸出：

Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
stopPropagation()

要么：

private function showAlert(e:Event):void {
                trace("Event: " + e.type + "; Phase: " + e.eventPhase +"; Target: " + e.target.name + "; Current Target: " + e.currentTarget.name);
                trace("stopImmediatePropagation()"); 
                e.stopImmediatePropagation();
            }

您將得到相同的結果：

Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
stopImmediatePropagation()

這是因為stopPropagation()和stopImmediatePropagation()阻止事件進入下一階段（冒泡）。

要查看這些方法之間的區別，您需要在按鈕“ btn”上具有兩個事件偵聽器 ：

<?xml version="1.0"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    initialize="init(event);">

    <fx:Script>
        <![CDATA[
            public function init(e:Event):void {
                var object:Object
                p1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                tw1.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                btn.addEventListener(MouseEvent.MOUSE_DOWN, showAlert);
                btn.addEventListener(MouseEvent.MOUSE_DOWN, showAlert2);
            }

            private function showAlert(e:Event):void {
                trace("showAlert(): Event: " + e.type + "; Phase: " + e.eventPhase +"; Target: " + e.target.name + "; Current Target: " + e.currentTarget.name);
                trace("showAlert(): stopPropagation()"); e.stopPropagation()                            // 1
                //trace("showAlert(): stopImmediatePropagation()"); e.stopImmediatePropagation();       // 2
            }

            private function showAlert2(e:Event):void {
                trace("showAlert2(): Event: " + e.type + "; Phase: " + e.eventPhase +"; Target: " + e.target.name + "; Current Target: " + e.currentTarget.name);
            }
        ]]>
    </fx:Script>
    <s:Panel id="p1" title="Stops Propagation">
        <mx:TitleWindow id="tw1"
                        showCloseButton="true"
                        title="Title Window 1">
            <s:Button id="btn" label="Click Me"/>
            <s:TextArea id="ta1"/>
        </mx:TitleWindow>
    </s:Panel>
</s:Application>

對於stopPropagation()結果為：

showAlert(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
showAlert(): stopPropagation()
showAlert2(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn

對於stopImmediatePropagation()結果為：

showAlert(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
showAlert(): stopImmediatePropagation()

如您所見， stopPropagation() 允許接收第二個偵聽器showAlert2() mouseDown事件。

同時stopImmediatePropagation() 阻止了showAlert2()的調用。