JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<div class="clicker">
  <p class="child">
    Press left mouse button here
  </p>
  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', (e) => {
    console.log('.clicker (bg) clicked');
    console.log('bg target is: ' + (e.target == undefined ? e.target : e.target.classList[0]));
    console.log('bg current target: ' + (e.currentTarget == undefined ? e.currentTarget : e.currentTarget.classList[0]));
	//alert('background was clicked');
});

document.querySelector('.child').addEventListener('click', (e) => {
    console.log('.child clicked');
    console.log('child target is: ' + (e.target == undefined ? e.target : e.target.classList[0]));
    console.log('child current target: ' + (e.currentTarget == undefined ? e.currentTarget : e.currentTarget.classList[0]));
  //alert('content was clicked');
  e.stopPropagation();
  e.preventDefault();
});

document.querySelector('.child').addEventListener('drag', (e) => {
  e.stopPropagation();
  e.preventDefault();
})