JSFiddle - React, Tailwind, and code Playground

HTML

<div id="back" class="back">
  <div id="content" class="content">
    <img id="image" class="image" src="https://www.wanimo.com/veterinaire/images/articles/chat/chaton-gris.jpg" alt="">
  </div>
</div>
<div id="result1">back state :</div>
<div id="result2">content state :</div>
<div id="result3">image state :</div>

CSS

.back {
  padding:50px;
  background:red;
}
.content {
  padding:50px;
  background:blue;
}
.image {
}

JavaScript

var back = document.getElementById("back");
var content = document.getElementById("content");
var image = document.getElementById("image");

if (back.addEventListener) {                    // For all major browsers, except IE 8 and earlier
  image.addEventListener("click", change);
  content.addEventListener("click", nothing);
  back.addEventListener("click", close);
} else if (back.attachEvent) {                  // For IE 8 and earlier versions
  image.attachEvent("onclick", change);
  content.attachEvent("onclick", nothing);
  back.attachEvent("onclick", close);
}

function close(event) {
	stopPropagation(event);
  var result = document.getElementById("result1");
  result.innerHTML += " close";
}
function nothing(event) {
	stopPropagation(event);
  var result = document.getElementById("result2");
  result.innerHTML += " nothing";
}
function change(event) {
	stopPropagation(event);
  var result = document.getElementById("result3");
  result.innerHTML += " change";
}
function stopPropagation(e) {
    if(e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.returnValue = false;
    }    
}