Home / Programmazione / Javascript - AJAX / Individuare le coordinate del mouse in Javascript
Mattepuffo

Individuare le coordinate del mouse in Javascript

Individuare le coordinate del mouse in Javascript

Non mi ricordo qual'era il motivo per cui  mi è servita questa cosa, ma mi è servita: individuare le coordinate del mouse in Javascript!

Per individuare le coordinate del mouse, dobbiamo intercettare l'evento mousemove, ed usare una delle seguente proprietà:

  • client -> si riferisce alla dimensione del browser
  • page -> prende in considerazione l'intero document (la pagina insomma)
  • screen -> l'intero monitor

Tutte e tre hanno una voce per la X e una per la Y.

Tendenzialmente uso page, in quanto mi servono le coordinate relative alla pagina.

Ecco un esempio:

<!DOCTYPE html>
<html>
    <head>
        <title>Test movimento mouse</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            document.addEventListener("mousemove", function (e) {
                document.getElementById("coordx").innerHTML = "x = " + e.pageX;
                document.getElementById("coordy").innerHTML = "y = " + e.pageY;
            }, false);
        </script>
    </head>
    <body>
        <h3>Muovi il mouse</h3>
        <span id="coordx"></span>
        <span id="coordy"></span>
    </body>
</html>

Come vedete intercettiamo l'evento mousemove, e poi inseriamo le coordinate negli span della pagina.

Fate le prove anche le accoppiate clientX / clientY e screenX / screenY per rendervi conto delle differenze.

Enjoy!