block by jasondavies 3186840

stopPropagation

Full Screen

This demonstrates how stopPropagation can be used to stop an event from propagating up the DOM tree, in response to a Stack Overflow question.

The mousedown event for the circle is prevented from propagating to the parent SVG element.

Note how a click gesture generates mousedown, mouseup and click events, in that order.

Note also that preventing the mousedown event from propagating is not sufficient to prevent the click event from propagating too. This must be done in a click event listener.

index.html