Events propagate until they reach the end destination in a nested listener arrangement. You have to use specific methods to stop the event from propagating further.
The following method halts the event at the event listener.
event.stopPropagation();
For example, if you call StopPropagation at the child button, the mouse click event will not propagate to the parent and document levels. Hence, event listeners at the higher level will not be triggered.
Stop all event propagation
StopPropagation only stops the current type of event from propagating. If the object has different types of event listeners registered to it, they still trigger despite the StopPropagation call.
To stop all events related to a specific object, you can use the StopImmediatePropagation method, as follows.
event.stopImmediatePropagation();
When one event listener calls StopImmediatePropagation, no other event listeners associated with the object are triggered.