Detectedeur de position de souris : suivi en direct des coordonnees X/Y
Ce detectedeur fait quelque chose que la plupart des outils de coordonnees omettent : il affiche les quatre systemes de coordonnees cote a cote -- screen, client, page et offset -- pour que vous voyiez exactement comment ils different en temps reel. Deplacez la souris sur la grille ci-dessous et cliquez pour enregistrer des coordonnees.
Outil de coordonnees plein ecranPourquoi quatre systemes de coordonnees
Si vous construisez quelque chose d interactif sur le web -- drag-and-drop, canvas, un jeu -- vous rencontrerez au moins quatre paires de coordonnees differentes pour la meme position de souris.
| Propriete | Mesure depuis | Change au scroll ? | Change au deplacement fenetre ? |
|---|---|---|---|
screenX / screenY | Moniteur physique | Non | Oui |
clientX / clientY | Viewport du navigateur | Non | Non |
pageX / pageY | Document complet | Oui | Non |
offsetX / offsetY | Element sous le curseur | Depend | Non |
La plupart des outils online montrent un ou deux systemes. Ce detectedeur montre les quatre simultanement.
Test : Notez les valeurs page et client en haut. Descendez d une demi-page. Client reste identique ; page augmente de la distance de scroll.
Screen vs Client : la grande confusion
screenX mesure depuis le moniteur physique. clientX depuis le viewport. Si la fenetre n est pas au coin, screenX est plus eleve.
Attention : Avec une mise a l echelle DPI superieure a 100%, un facteur supplementaire peut s appliquer. Voir guide DPI.
Coordonnees page et defilement
pageX/pageY sont identiques a clientX/clientY en haut de page. Au scroll, ils divergent.
Coordonnees offset pour interaction
offsetX/offsetY mesurent depuis l element sous le curseur. Saute au survol d elements enfants.
Correctif : e.currentTarget.getBoundingClientRect() puis e.clientX - rect.left.
Utilisation du journal de coordonnees
Chaque clic dans la grille enregistre la position dans les trois systemes. Copie au format tabule pour Excel ou scripts.
Flux : 1) Cliquer les cibles. 2) "Copier". 3) Coller. screenX/screenY pour pyautogui.click(x,y). Voir guide PyAutoGUI.
Comment le DPI affecte ces nombres
Le navigateur rapporte des pixels CSS, les outils natifs des pixels physiques. A 150%, un pixel CSS = 1.5 pixels physiques. Verifiez window.devicePixelRatio. Voir guide DPI et pixels physiques vs logiques.
Appareils tactiles et mobile
Pas de mousemove mais touchmove. Le detectedeur fonctionne sur mobile : toucher et glisser dans la grille.
Comparaison avec d autres outils
| Fonctionnalite | Outils typiques | Ce detectedeur |
|---|---|---|
| Systemes affiches | 1-2 | 4 simultanement |
| Capture par clic | Rare | Oui, avec export |
| Lignes guide | Parfois | Oui, deux axes |
| Support mobile | Souvent casse | Fonctionne via touchmove |
| Contenu educatif | Nul | Guide complet |
| Publicites | Nombreuses | Aucune |
Questions frequentes
Pourquoi screenX change en deplacant la fenetre ?
Mesure depuis le moniteur physique.
Quelles coordonnees pour mon script ?
PyAutoGUI/AutoHotkey : screenX/screenY. Puppeteer/Playwright : clientX/clientY.
Couleur du pixel au curseur ?
La securite du navigateur empeche la lecture. Voir guide de coordonnees.
Pourquoi offsetX saute sur les enfants ?
Le referentiel change. Utilisez getBoundingClientRect().
Fonctionne en iframe ?
Oui, mais screenX/screenY relatifs a l iframe.