Saber posición (coordenadas) del ratón

 
Saber la posición del ratón, puede ser útil, para crear efectos al pasar por determinados puntos. O hacer el efecto de arrastre de algún elemento mediante las coordenadas y los diferentes eventos.

Para saber la posición del cursor dentro de la página o de la pantalla, se deben utilizar los parámetros devueltos por el evento del ratón.

Con los atributos clientX / clientY, se puede saber la posición del ratón con respecto a la ventana del navegador.

Los atributos screenX / screenY, devuelven la posición con respecto a la pantalla del equipo del usuario.

El ejemplo, por lo tanto es muy sencillo:

En la parte de JavaScript (el head), simplemente se crea una función que al llamarse pinta las coordenadas en las diferentes capas.
Además establece el evento para que al pasar el ratón sobre el documento, llame a la función, dependiendo del navegador y versión, el evento debe ser recogido como parámetro (navegadores actuales), sin embargo en versiones antiguas de I.E. (8 y anteriores) el evento, es el objeto global event, por lo que se pone la línea e = evento || event; que intentaría coger primero el evento por parámetro y si no puede de event.

En la parte del body, se crean las capas para que la información sea pintada por la función.

Además del evento onmousemove, se podría haber usado otros eventos como onmousedown, onmouseup, onclick, etc.


En el HEAD:
<script type="text/javascript">
    // Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente <!--
    // Copyright © McAnam.com
    // http://www.mcanam.com/articulos/JavaScript.php?id=32
    
    function pintaPosPuntero(evento){
        
        document.getElementById("cursorX").innerHTML = evento.clientX;
        document.getElementById("cursorY").innerHTML = evento.clientY;
        
        document.getElementById("posicionX").innerHTML = evento.screenX;
        document.getElementById("posicionY").innerHTML = evento.screenY;
        
    }
    
    window.onload = function() {
        document.onmousemove = function(evento) {
            e = evento || event;
            pintaPosPuntero(e);
        };
    }
    
    //-->
</script>

En el BODY:
<div onmousemove="pintaPosPuntero(event)">
    
    <b>Posición respecto a la página</b> <br />
    <div><span>event.clientX: </span><span name="cursorX" id="cursorX"></span></div>
    <div><span>event.clientY: </span><span name="cursorX" id="cursorY"></span></div>
    
    <br />
    
    <b>Posición respecto a la pantalla</b> <br />
    <div><span>event.screenX: </span><span name="posicionX" id="posicionX"></span></div>
    <div><span>event.screenY: </span><span name="posicionX" id="posicionY"></span></div>
    
</div>

Ejemplo:

Links relacionados:
Conocer datos del usuario
Cambiar el tipo de cursor una vez cargada la página
Etiqueta desplazándose por el explorador
Recoger datos del sistema (color, fuentes disponibles, etc.)
Estilos, Cambiar el puntero del ratón


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com