Event propagation: How to prevent it?

Event Propagation is simply the ways by which order an event is captured by browser in an HTML page where elements are nested. There are basically two types of event propagation bubbling and capturing. In event bubbling the event of the innermost element is captured first while in event capturing the event of outermost element is captured first. The most famous example to understand this is an example of three boxes.

Three boxes one inside the other all three have event handlers. Now you want to give an alert when clicked on each boxes. Now when you click on one of the boxes the alert will come from the inner most element first and then outer ones followed. But if you specify event propagation type to capturing then outermost will be called first and innermost at the later stage. Now here the problem is when you click on innermost box you want the event of innermost box to be called followed by no other event unless specifically specified.

In order to achieve that you need to stop event propagation. There are certainly two ways to do so:

e.preventDefault()
e.stopPropagation()

e.stopPropagation only stops the propagation of event but will still allow default behaviour if any such as links, etc. e.preventDefault will stop event propagation and default behaviour.