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

首先，您在按钮上定位阶段（eventPhase = 2），然后在冒泡阶段的TitleWindow和Panel上接收事件（eventPhase = 3）。

如果修改事件监听器，如：

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()是阻止事件进入下一阶段（Bubbling）。

要查看这些方法之间的区别，您需要在按钮'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() 允许为第二个听众mouseDown接收showAlert2()个事件。

同时stopImmediatePropagation() 阻止调用showAlert2()。

Flex中stopPropagation（）和stopImmediatePropagation（）之间的差异

1 个答案: