JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <div id="target">
  <h1>
  I'm a clickable H1 element! <span>I'm a clickable SPAN element inside the H1 element!</span>
  </h1>
  </div>
  <div id="not-target">
  <h1>
  I'm another H1, not inside #target and therefore not clickable. <span>This is a SPAN (also not inside #target and therefore not clickable either)!</span>
  </h1>
  </div>
</div>

CSS

#target {
  border: 1px solid;
  background-color: red;
}

JavaScript

"use strict";
var target = document.getElementById('target'),
		sayHeyo = function (elem) {
    	alert('heyo from ' + elem);
    };
target.addEventListener('click', function (e) {
  console.log(e.target.tagName + ' was clicked');
  sayHeyo(e.target.tagName);
}, false);