JSFiddle - React, Tailwind, and code Playground

HTML

<div class='main'>
  <div class="child">
    
  </div>
</div>

CSS

.main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  height: 100px;
  width: 100px;
  background-color: #fff;
}

JavaScript

document
    .querySelector('.child')
    .addEventListener('click', event => { 
        event.stopPropagation();
        
      
        console.log( event.eventPhase, event.target, event.currentTarget)
      });