Mauszeiger verfolgen und Klicks dokumentieren – ../../events-mouse.html

Übertragen der x- und y-Position des Mauszeigers bei jeder Bewegung in die weißen Felder und Bewegen des blauen Kreises bei einem Klick auf die Position der Maus.

<div class="wrapper">
   <div class="columns stripe">
      <div class="column mouseX"></div>
      <div class="column mouseY"></div>
   </div>
   <div class="pixel"></div>
</div>

HTML, CSS im Verzeichnis events-mouse-challenge/index.html

const stripe = document.querySelector (".stripe");
stripe.addEventListener ("mousemove", function (evt) {
   document.querySelector (".mouseX").innerText = evt.offsetX;
   document.querySelector (".mouseY").innerText = evt.offsetY;
});

stripe.addEventListener ("click", function (evt) {
   const pixel = document.querySelector (".pixel");
   pixel.setAttribute ("style", 
      `left: ${evt.offsetX}px; top: ${evt.offsetY}px`);
});