Hay muchas situaciones en las que es necesario o al menos util, saber las cordenadas del mouse, con las cordenadas (x,y) de la posicion del mouse podemos hacer muchas cosas … desde simple efectos hasta eventos que se disparen cuando el mouse este en cierta posicion.
Ahora veremos lo basico y en posts siguientes veremos algo mas practico…
Una forma de obtenerla posicion es relativa al documento , es decir obtendremos la posicion de cualquier lugar del documento donde posicionemos el mouse …
<body>
<div id='positions'></div>
<script>
document.onmousemove = function(pos){
positions = document.querySelector('#positions');
positions.innerHTML = "X : " + pos.clientX + "-> Y : " + pos.clientY ;
}
</script>
</body>
El evento javascript que rescatamos aqui es el evento onmousemove, que se dispara cada vez que se mueve el mouse, y al usar document.mousemove hacemos referencia a la posicion del mouse en el documento.
Usamos una funcion inline para darle funcionamiento al evento, el argumento pos que se le pasa a la funcion, obtiene varios atributos relacionados a la posicion y el scroll, entre otras cosas.Los atributos que aqui nos interesan con clientX que nos da las cordenadas en X, y clientY que nos da las cordenadas Y, al ser atributos de pos para acceder a sus valores usamos pos.clientY, pos.clientY …
Usamos querySelector para sustituir al getElementById , cuando seleccionamos el div donde plantamos las cordenadas. El codigo javascript funcional :
document.onmousemove = function(pos){
positions = document.querySelector('#positions');
positions.innerHTML = "X : " + pos.clientX + "-> Y : " + pos.clientY ;
}
