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()的调用。