JavaScripts › Verschiedenes

Mauskoordinaten

Zeigt fortlaufend an, an welcher Stelle der Seite der Mauszeiger gerade steht — X und Y in Pixeln.

Dieses kleine Script zeigt euch laufend an, wo sich der Mauszeiger gerade befindet. Zwei Felder halten die aktuellen Werte fest: X ist der waagerechte Abstand vom linken Seitenrand, Y der senkrechte Abstand vom oberen Seitenrand — beides in Bildschirmpunkten (Pixeln) gemessen.

Bedienen müsst ihr nichts: Bewegt einfach die Maus über diese Seite, dann zählen die beiden Felder mit. Je weiter ihr nach rechts fahrt, desto größer wird X; je weiter nach unten, desto größer Y. Der Nullpunkt liegt oben links, nicht wie im Mathematikunterricht unten links — das ist bei Bildschirmkoordinaten so üblich, weil Text und Seiteninhalt von oben nach unten aufgebaut werden.

Der Wert bezieht sich auf das gesamte Dokument, nicht nur auf den sichtbaren Ausschnitt. Wenn ihr die Seite nach unten scrollt und die Maus dabei an derselben Stelle des Fensters stehen lässt, wächst Y trotzdem weiter — der gescrollte Teil wird mitgerechnet. Genau diese Unterscheidung zwischen Fensterkoordinaten und Dokumentkoordinaten ist der Punkt, an dem solche Scripts früher am häufigsten gestolpert sind.

Interessant ist das Script vor allem als Werkzeug beim Basteln: Wer eine Grafik, ein Menü oder ein bewegtes Element genau positionieren will, kann hier bequem die passenden Pixelwerte ablesen. Und wer verstehen möchte, wie ein Browser Eingaben meldet, findet bei uns dasselbe Prinzip für die Tastatur unter Tastencodes anzeigen. Was der Browser sonst noch über sich verrät, zeigen die Browserinformationen.

Verschiedenes Baujahr 2004 läuft in deinem Browser

Bewegt die Maus über die Seite — die Werte laufen mit.

So funktioniert das Script

Das Script ist eines der kürzesten im Archiv und besteht nur aus drei Teilen: Es merkt sich die beiden Anzeigefelder, es holt bei jeder Mausbewegung die Position aus dem Ereignis, und es schreibt sie in die Felder. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

const feldX = document.getElementById("mk-x");
const feldY = document.getElementById("mk-y");

Zuerst werden die beiden Ausgabefelder einmalig herausgesucht und in feldX und feldY abgelegt. getElementById sucht ein Element anhand seiner id. Das passiert bewusst nur ein einziges Mal beim Laden und nicht bei jeder Mausbewegung — die Maus meldet sich Dutzende Male pro Sekunde, und jedes Mal die Seite nach denselben Feldern zu durchsuchen wäre unnötige Arbeit.

function zeigeMausposition(ereignis) {
  let x = Math.round(ereignis.pageX);
  let y = Math.round(ereignis.pageY);

Der Parameter ereignis ist das sogenannte Event-Objekt. Der Browser reicht es automatisch an die Funktion weiter und packt alles hinein, was zur Mausbewegung gehört: welche Tasten gedrückt sind, über welchem Element der Zeiger steht — und eben die Position. pageX und pageY geben den Abstand zur linken oberen Ecke des Dokuments an, inklusive des bereits weggescrollten Bereichs. Die Geschwister clientX und clientY würden stattdessen vom sichtbaren Fensterrand aus messen. Math.round rundet auf ganze Pixel, weil moderne Browser auf hochauflösenden Bildschirmen auch Nachkommastellen melden können.

if (x < 0) { x = 0; }
if (y < 0) { y = 0; }

Diese Sicherung stammt aus dem Original und schadet auch heute nicht: Sollte ein Browser einen negativen Wert melden — etwa weil der Zeiger rechnerisch links über den Seitenrand hinausragt —, wird daraus eine glatte 0. So steht in den Feldern nie eine Zahl, die es auf der Seite gar nicht geben kann.

document.addEventListener("mousemove", zeigeMausposition);

Die letzte Zeile verbindet die Funktion mit dem Ereignis. addEventListener heißt übersetzt „einen Zuhörer hinzufügen": Ab jetzt ruft der Browser bei jedem mousemove — also bei jeder Mausbewegung — die Funktion zeigeMausposition auf. Angemeldet wird der Zuhörer am document, also an der gesamten Seite, damit die Anzeige überall mitläuft und nicht nur über den beiden Feldern.

Zum Anpassen: Wollt ihr statt der Dokument- die Fensterkoordinaten sehen, ersetzt ereignis.pageX durch ereignis.clientX und ereignis.pageY durch ereignis.clientY. Und wenn die Anzeige nur reagieren soll, solange die Maus über einem bestimmten Bereich ist, hängt ihr den Zuhörer statt an document einfach an dieses Element — zum Beispiel document.getElementById("meinBereich").addEventListener(…).

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes