JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<div class="clicker">
  <div class="child">
    Press left mouse button here
  </div>
  then relase it here
</div>

CSS

.clicker {
  background: #DADADA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  gap: 20px;
  user-select: none;
}

.child {
  background: white;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

document.querySelector('.clicker').addEventListener('click', () => {
    event.stopImmediatePropagation();
	alert('background was clicked')
});

document.querySelector('.child').addEventListener('click', event => {
  event.stopImmediatePropagation();
  alert('content was clicked');
});