Event-Position im Browserfenster, Dokument, Viewport oder relativ zum Element

Das Event Object

Jedes Event liefert eine lange Liste von Informationen: vom Typ des Events über das auslösende Element bis hin zur Position des Mauszeigers. Auf dem Touchscreen hingegeben ist die Bewegung des Fingers anders verortet: Diese Geste ist für das Scrollen der Seite vorbestimmt.

mouseclick, mousemove

Das Abfangen eines Mausklicks oder der Bewegung der Maus gehört zu den Grundlagen der Navigation und natürlich auch für Spiele.

<div class="demo">
   <figure draggable="true">
	  <img id="stift" src="svg/stift.svg" width="157" height="104">
	  <figcaption class="caption">Der Stift</figcaption>
   </figure>
</div>

const stift = document.querySelector ("#stift");
stift.addEventListener ("click", function (evt) {
	document.querySelector ("#clientX").value = evt.clientX;
	document.querySelector ("#clientY").value = evt.clientY;
	
	document.querySelector ("#offsetX").value = evt.offsetX;
	document.querySelector ("#offsetY").value = evt.offsetY;
	
	document.querySelector ("#pageX").value = evt.pageX;
	document.querySelector ("#pageY").value = evt.pageY;
	
	document.querySelector ("#screenX").value = evt.screenX;
	document.querySelector ("#screenY").value = evt.screenY;
});

mousemove – die Bewegung der Maus – innerhalb eines Elements abfangen:

stift.addEventListener ("mousemove", function (evt) {
	console.log ("mousemove", evt.offsetX, evt.offsetY);
})

Die Koordinaten der Maus

Die Position der Maus eröffnet sich nicht nur beim Klick, sondern jede Bewegung der Maus – onmousemove – feuert bei jeder Bewegung der Maus. onmouseover entdeckt die Bewegung der Maus, sobald der Cursor die Grenze zum Element passiert hat (onmousemove hingegen bereits an der Grenze zum Element). Zusammen mit onmousemove, onmouseout, onmouseup und Bewegungen wie ondrag / ondrop bilden die Ereignisse der Maus die Basis für Anwendungen vom Warenkorb über Zeichenprogramme bis hin zu Spielen.