[英]Differences between stopPropagation() and stopImmediatePropagation() in Flex
I am working on event handling in flex. 我正在Flex中进行事件处理。
I need to stop event propagation of an event on a node. 我需要停止节点上事件的事件传播。
I found no difference between stopPropagation()
and stopImmediatePropagation()
. 我发现stopPropagation()
和stopImmediatePropagation()
之间没有区别。
Is there any difference between these functions? 这些功能之间有什么区别吗?
<?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>
event.stopImmediatePropagation()
- completely stops the event. event.stopImmediatePropagation()
-完全停止事件。 No other listener will receive a call for that event. 没有其他侦听器会收到该事件的呼叫。
event.stopPropagation()
- prevents moving event to the next display list node but allow invoking listeners on the currentTarget object (if they exists). event.stopPropagation()
-阻止将事件移动到下一个显示列表节点,但允许在currentTarget对象上调用侦听器(如果存在)。
See slightly modified your code: 看到稍微修改您的代码:
<?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>
Output: 输出:
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
First you receive the event on Button in Targeting phase (eventPhase=2) and then on TitleWindow and Panel in Bubbling phase (eventPhase=3). 首先,在Targeting阶段(EventPhase = 2)在Button上接收事件,然后在Bubbling阶段(eventPhase = 3)在TitleWindow和Panel上接收事件。
If you modify event listener like: 如果您像这样修改事件监听器:
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();
}
Output: 输出:
Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
stopPropagation()
Or: 要么:
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();
}
You will get the same result: 您将得到相同的结果:
Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
stopImmediatePropagation()
It is because stopPropagation()
and stopImmediatePropagation()
are prevent event to go into the next phase (Bubbling). 这是因为stopPropagation()
和stopImmediatePropagation()
阻止事件进入下一阶段(冒泡)。
To see difference between these methods you need to have two event listeners on the button 'btn': 要查看这些方法之间的区别,您需要在按钮“ 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>
For stopPropagation()
result is: 对于stopPropagation()
结果为:
showAlert(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
showAlert(): stopPropagation()
showAlert2(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
For stopImmediatePropagation()
result is: 对于stopImmediatePropagation()
结果为:
showAlert(): Event: mouseDown; Phase: 2; Target: btn; Current Target: btn
showAlert(): stopImmediatePropagation()
As you can see stopPropagation()
has allowed to receive mouseDown
event for the second listener showAlert2()
. 如您所见, stopPropagation()
允许接收第二个侦听器showAlert2()
mouseDown
事件。
At the same time stopImmediatePropagation()
has prevented a call of showAlert2()
. 同时stopImmediatePropagation()
阻止了showAlert2()
的调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.