Event Propagation

Whenever an event fires on a control inside an HTML document, it "bubbles" up to the parents - to allow the parents to react to that event as well. This is a standard feature of all modern browsers; read more about it on Wikipedia.

In QCubed, we sometimes may want events to stop bubbling up the DOM tree. To do this, we use StopPropagation.

Below are two examples. In each, you'll see a panel that responds to click events. In the first example, both the inside panel and the outside panel capture the click inside the innermost panel 2 - event bubbling in action.

The second example shows how to stop the bubbling effect using StopPropagation. When you click inside the innermost panel 4, only panel 4 will respond to the click, and the click handler will never be called for panel 3.

Example with event bubbling (default)

I'm panel 1
I'm panel 2 and I'm a child of panel 1.

If you click me, both my click action and panel 1's click action will fire

Example without event bubbling

I'm panel 3
I'm panel 4 and I'm a child of panel 3.

If you click me only my click action will fire thanks to StopPropagation