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!