JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<span id='texto'></span>
</div>

CSS

div {
  background-color: green;
  color: white;
  width: 300px;
  height: 300px;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

function ejemplo2 (evento) {
  alert('Hiciste click en coordenadas: ' + evento.clientX + ', ' + evento.clientY + ' con botón ' + evento.button);
}

function ejemplo3 (evento, elemento) {
  escribirEtiqueta ('Ahora estás en coordenadas: ' + (evento.clientX - elemento.offsetLeft) + ', ' + (evento.clientY - elemento.offsetTop));
}

function resetearEtiqueta () { escribirEtiqueta('Pincha en lo verde'); }

function escribirEtiqueta (texto) { document.querySelector('#texto').innerHTML = texto; }

function colorear(evento, color) { evento.target.style.backgroundColor = color;
}

// Caso handlers con JS

var miFuncion = (event) => ejemplo3(event, event.target);

var capa = document.querySelector("div");
capa.onmousedown = (event) => ejemplo2(event);
capa.onmousemove = miFuncion;
capa.onmouseleave = resetearEtiqueta;

capa.addEventListener("mousemove", (event) => colorear(event, 'red'));
capa.addEventListener("mouseleave", (event) => colorear(event, 'green'));

resetearEtiqueta();