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!
javascript mousemove client page screen
Commentami!