(10 votes, average: 3.7 out of 5) 
Loading ...Stopping an event's propagation, or continued movement through the display list, is another option for more advanced event processing. In most cases, an event will not die at the target phase right after it is executed. Instead, it will bubble back up through any existing ancestors. However, you can also prevent the event from continuing on its journey by halting the propagation process.
Here is a simple example. We have a movie clip called container that, when clicked, will display "container down" in the text field at left. This clip has two buttons inside it called normal_btn and stopProp_btn that will display "normal down" and "stopProp down," respectively, in the text field. The button normal_btn uses the default behavior and will allow an event to bubble, while stopProp_btn uses the stopPropagation() method to halt the event flow at the target.
Click on the boxes inside the container
Download Stop Propagation (15.1 KB, 1,078 hits)
As you can see, when you click on normal_btn, you will see both the text from the button and the container, as the event bubbles. However, when clicking on stopProp_btn, you will only see the button text. Here's the code:
-
container.normal_btn.addEventListener(MouseEvent.MOUSE_DOWN,
-
onNormalDown,
-
false, 0, true);
-
-
container.stopProp_btn.addEventListener(MouseEvent.MOUSE_DOWN,
-
onStopPropDown,
-
false, 0, true);
-
-
function onNormalDown(evt:MouseEvent):void {
-
output.text = "normal down";
-
}
-
-
function onStopPropDown(evt:MouseEvent):void {
-
output.text = "stopProp down";
-
evt.stopPropagation();
-
}
-
-
container.addEventListener(MouseEvent.MOUSE_DOWN,
-
onContainerDown,
-
false, 0, true);
-
-
function onContainerDown(evt:MouseEvent):void {
-
if (evt.target == evt.currentTarget) {
-
output.text = "container down";
-
} else {
-
output.appendText("\n" + "container down");
-
}
-
}
The conditional in lines 23 through 27 is not related to stopping event propagation. It was added to clear the text field when clicking only on the container. See the related post, "The Event Object," for more information about target and currentTarget
We'll provide an additional example, as well as discuss the related stopImmediatePropagation() method, in a future post.
Print This Post
learning actionscript3.0!!
lick actionscript very much!
Thank you, now i finally understand what stoppropagation does
Thanks that helped me a lot
Does this work with startDrag?
Below is a code example that makes a parent box (p) with multiple children boxes (c). I want the patent to drag but not the children. Imaging I'm building a keyboard where I want to be able to move the entire keyboard but not individual keys.
How do I stop the children from being individually draggable?
package { import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite { public function Main() { var p:Sprite = new Sprite(); p.graphics.lineStyle(2,0x62555E); p.graphics.beginFill(0xF2E8E8); p.graphics.drawRoundRect(0, 0, 400, 200, 10); p.graphics.endFill(); p.x = 10; p.y = 100; addChild(p); p.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag, false, 0, true); p.addEventListener(MouseEvent.MOUSE_UP, onStopDrag, false, 0, true); var boxX:int = 50; for (var i=0; i < 8; i++) { var c:Sprite=new Sprite; c.name = "c_" + i; c.graphics.lineStyle(NaN, 0xffffff); c.graphics.beginFill(0x627b78); c.graphics.drawRoundRect(boxX, 30, 30, 30, 10); c.graphics.endFill(); p.addChild(c); boxX += 40; } } function onStartDrag(evt:MouseEvent):void { evt.target.startDrag(); evt.stopPropagation(); //evt.stopImmediatePropagation(); } function onStopDrag(evt:MouseEvent):void { evt.target.stopDrag(); } } }@Chris, there's a better way to do what you want than by stopping event propagation. Just change your onStartDrag() method to the following:
function onStartDrag(evt:MouseEvent):void { evt.currentTarget.startDrag(); }The currentTarget is the object to which the listener is attached. So, only the keyboard will drag.
@Rich, thanks. That's a much better solution. It worked perfectly. Thanks.
simple, but useful, I've just used this function for stopping a mouse click propagation in my new game.
Thanks for sharing
@dmc, glad you like it!