JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="foo" id="foo" tabIndex="1">
  hello
  <h1 id="fooAlpha">
    foo alpha
  </h1>
</div>

<div tabIndex="1" class="bar">
goodbye
</div>

CSS

.foo {
   background: green;
   padding: 20px;
   margin: 20px;
}
.bar  {
  background: red;
  padding: 20px;
}

JavaScript

foo.addEventListener('click', (event) => {
	console.log(event.currentTarget);
  console.log(event.target)
}, true);

fooAlpha.addEventListener('click', (event) => {
	//event.stopPropagation();
	//console.log('click on foo alpha');
});