JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper"> I am a wrapper
  <div id="clickMe"> Click me
    <div class="childOfClickMe">I am a child of clickMe</div>
    <div class="childOfClickMe">I am a child of clickMe</div>
    <div class="childOfClickMe">I am a child of clickMe</div>
  </div>
</div>

CSS

div {
  padding: 20px;
  color: #000;
  box-sizing: border-box;
  border: 1px solid black;
}

JavaScript

var wrapper = document.querySelector('.wrapper');
var clickMe = document.getElementById('clickMe');

wrapper.addEventListener('click', function(e) {
	if (e.target === wrapper) {
  	console.log("You've clicked the wrapper lement");
  } else if (e.target === clickMe) {
  	console.log("You've clicked the clickMeElement");
  } else if (e.target.parentNode === clickMe) {
  	console.log("You've clicked the child of clickMe")
  }
});