JSFiddle - React, Tailwind, and code Playground

by alpac

HTML

<div id="contBig">
  <div class="contSm">
    <p>1111</p>
  </div>
  <div class="contSm">
    <p>2222</p>
  </div>
</div>

CSS

#contBig {
  width: 300px;
  height: 400px;
  background: red;
}

.contSm {
  width: 100px;
  height: 100px;
  background: black;
}

p {
  color: white;
}

p:hover {
  cursor: pointer;
}

JavaScript

var foo = function(event) {
  let element = event.target;

  for (var i = 0; i < event.path.length; i++) {
    if (event.path[i] == document.getElementById('contBig') && event.path[i - 1]) {
      element = event.path[i - 1];
    };
  }

  console.log(element);
  return element;
};

document.getElementById('contBig').addEventListener('click', foo);