MDN example of event propagation

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in this example, when you select the video, the event bubbles from the <video> element outwards to the <html> element. Along the way:

  1. It finds the video.onclick... handler and runs it, so the video first starts playing.
  2. It then finds the videoBox.onclick... handler and runs it, so the video is hidden as well.

Click on the links below try them & also look at the source

  1. mdn example explained above

  2. using stopPropagation() fixed mdn example