Mauspositions-Detektor: Live X/Y-Koordinaten-Tracker
Dieser Detektor macht etwas, das die meisten Koordinaten-Tools auslassen: Er zeigt alle vier Koordinatensysteme gleichzeitig -- screen, client, page und offset -- damit Sie in Echtzeit sehen, wie sie sich unterscheiden. Bewegen Sie die Maus ueber das Raster unten und klicken Sie, um Koordinaten zu protokollieren.
Vollbild-Koordinaten-ToolWarum es vier Koordinatensysteme gibt
Wenn Sie etwas Interaktives im Web bauen -- Drag-and-Drop, Canvas, ein Spiel -- werden Sie mindestens vier verschiedene Koordinatenpaare fuer dieselbe Mausposition antreffen. Sie sind nicht redundant; jedes beantwortet eine andere Frage.
| Eigenschaft | Gemessen ab | Aendert sich beim Scrollen? | Beim Fensterbewegen? |
|---|---|---|---|
screenX / screenY | Physischer Monitor | Nein | Ja |
clientX / clientY | Browser-Viewport | Nein | Nein |
pageX / pageY | Gesamtes Dokument | Ja | Nein |
offsetX / offsetY | Element unter dem Cursor | Teilweise | Nein |
Die meisten Online-Tools zeigen nur ein oder zwei Systeme. Dieser Detektor zeigt alle vier gleichzeitig.
Test: Notieren Sie page- und client-Werte oben auf der Seite. Scrollen Sie halb herunter. Client bleibt gleich; page steigt um die Scroll-Distanz.
Screen vs Client: die grosse Verwirrung
screenX misst ab der physischen Monitorecke. clientX ab dem Browser-Viewport. Wenn das Fenster nicht in der Ecke sitzt, ist screenX hoeher.
Hinweis: Bei DPI-Skalierung ueber 100% kann ein zusaetzlicher Skalierungsfaktor vorliegen. Siehe DPI-Leitfaden.
Page-Koordinaten und Scrollen
Beim Scrollen divergieren pageX/pageY und clientX/clientY. Wichtig beim Speichern von Positionen fuer spaetere Wiedergabe.
Offset-Koordinaten fuer Elementinteraktion
offsetX/offsetY messen ab dem Element unter dem Cursor. Springen beim Ueberqueren von Kindelementen.
Fix: e.currentTarget.getBoundingClientRect() verwenden und e.clientX - rect.left berechnen.
Verwendung des Koordinatenprotokolls
Jeder Klick im Raster erfasst die Position in allen drei Systemen. Kopierfunktion fuer Excel oder Skripte.
Ablauf: 1) Ziele anklicken. 2) "Kopieren". 3) Einfuegen. screenX/screenY fuer pyautogui.click(x,y). Siehe PyAutoGUI-Leitfaden.
Wie DPI-Skalierung die Zahlen beeinflusst
Browser melden CSS-Pixel, native Tools physische Pixel. Bei 150% Skalierung entspricht ein CSS-Pixel 1.5 physischen. Siehe DPI-Leitfaden und physische vs. logische Pixel.
Touch-Geraete und Mobil
Kein mousemove, aber touchmove. Der Detektor funktioniert auf Mobil: im Raster beruehren und ziehen.
Vergleich mit anderen Tools
| Feature | Typische Tools | Dieser Detektor |
|---|---|---|
| Gezeigte Systeme | 1-2 | 4 gleichzeitig |
| Punkte mit Klick erfassen | Selten | Ja, mit Export |
| Fadenkreuz | Manchmal | Ja, beide Achsen |
| Mobil-Unterstuetzung | Meist defekt | Funktioniert |
| Educational content | Keine | Vollstaendige Anleitung |
| Werbung | Heavy | Keine |
Haeufige Fragen
Warum aendert screenX beim Fensterbewegen?
Misst ab dem physischen Monitor.
Welche Koordinaten fuer Automatisierung?
PyAutoGUI/AutoHotkey: screenX/screenY. Puppeteer/Playwright: clientX/clientY.
Pixelfarbe am Cursor?
Browser-Sicherheit verhindert das Lesen beliebiger Pixel. Siehe Koordinaten-Leitfaden.
Warum springt offsetX bei Kindelementen?
Referenzpunkt aendert sich. getBoundingClientRect() verwenden.
Funktioniert im iframe?
Ja, aber screenX/screenY relativ zur iframe-Position.