ActionScript 2: Nested button events

Sometimes it’s helpful to have a quick reminder of how button events work within nested clips in ActionScript 2.

[ TRY DEMO ]

A button nested inside another button OR inside a MovieClip that has buttonEvents assigned to it will not work. (Button events include: onRollOver, onRollOut, onDragOver, onDragOut, onPress, onRelease and onReleaseOutside).

This is due to the way Flash captures events: the first parent instance with a button event handler assigned to it is the one that is listened to. None of its child objects will be listened for unless you use a workaround.

In the demo, example #1 works because the red rectangle is simply sitting directly on the Stage. It IS the parent instance in this case.

#2 does not work because the red rectangle button is now inside another button, and buttons have button event handlers automatically assigned to them.

#3 works because the red rectangle button is inside a movie clip that does not have any button event handlers assigned to it.

#4 is the same as 3 but does not work because the parent movie clip now has a button event handler assigned to it.

The complete bible on dealing event handling and propagation in nested buttons and MovieClips in AS2 was written by Senocular [here]

Senocular lists several workarounds, including delegating a parent instance’s events to its children, using hitTest to manually detect events, and a combination of the two methods.