JSFiddle - React, Tailwind, and code Playground

by siemer

HTML

<div id=1>
  <div id=2>
    <div id=3>
    click here, check console for the result frame (not main console)
    </div>
  </div>
</div>

CSS

div {padding: 30px; background: #ee9;}
div > div {background: #8bb;}
div > div > div {background: #bbd;}

JavaScript

// fiddle with Id, boolean and position (or not)
// document.getElementById('2').addEventListener('click', (e) => e.stopPropagation(), true);

document.querySelectorAll('div').forEach(
	(div, index) => [false, true].forEach(
  	capture => div.addEventListener(
    	'click',
      () =>	console.log(
      	`div ${index+1} ${capture?'capture':'bubble'} phase`),
      capture
    )
  )
);