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

Die Position des Mauszeigers bzw. des Fingers bei einem click- oder touch-Event als auch während der Bewegung wird in Form von X-Y-Koordinaten des Events als clientX/Y, pageX/Y, offsetX/Y und screenX/Y als Eigenschaften des event-Objekts geliefert.

Position, Platz eines Events

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.

Position der Maus in Hinsicht auf Browserfenster oder Seite
event.clientXDie x-Position der Maus relativ zum Browserfenster
event.clientYDie y-Position der Maus relativ zum Browserfenster
event.offsetXDie x-Position der Maus relativ zum Element
event.offsetYDie y-Position der Maus relativ zum Element
event.pageXDie x-Position der Maus relativ zur Seite
event.pageYDie y-Position der Maus relativ zur Seite
event.screenXDie x-Position der Maus relativ zum Screen
event.screenYDie y-Position der Maus relativ zum Screen

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.

Der Stift

clientX, clientY

offsetX, offsetY

pageX, pageY

screenX, screenY

<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.

Suchen auf mediaevent.de