Stopping Event Propagation at Learning ActionScript 3.0

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

This movie requires Flash Player 9. Please update your player.

Download: Stop Propagation Download Stop Propagation (15.1 KB, 95 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:

SHOW PLAIN TEXT

ActionScript 3.0:

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.

Share This: