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`); });