[Javascript] Obteniendo las Cordenadas del Mouse

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 ;
}
Related Posts Plugin for WordPress, Blogger...

publicidad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *