14 - Evento mousemove.

Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo.

Si queremos recuperar la coordenada donde se encuentra en ese momento el mouse, jQuery pasa el objeto event como parámetro (con la ventaja que hace transparente las diferencias entre IE y otros navegadores)

Problema:Capturar el evento mousemove a nivel del objeto document, este se dispara cada vez que desplazamos el mouse dentro de la página. Mostrar la coordenada donde se encuentra la flecha del mouse.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <p id="corx">coordenada x=</p>
  <p id="cory">coordenada y=</p>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $(document);
  x.mousemove(moverMouse);
}

function moverMouse(event) {
  let x = $("#corx");
  x.text("coordenada x=" + event.clientX);
  x = $("#cory");
  x.text("coordenada y=" + event.clientY);
}

Primero obtenemos la referencia del objeto document y le registramos la función a ejecutar cuando se desplace el mouse:

  let x = $(document);
  x.mousemove(moverMouse);

La función que se ejecuta cada vez que se desplaza la flecha del mouse en el documento es:

function moverMouse(event) {
  let x = $("#corx");
  x.text("coordenada x=" + event.clientX);
  x = $("#cory");
  x.text("coordenada y=" + event.clientY);
}

En esta creamos un objeto jQuery a partir del id del primer párrafo y fijamos el texto del mismo con el valor del atributo event.clientX que almacena la coordenada x de la flecha del mouse:

  let x = $("#corx");
  x.text("coordenada x=" + event.clientX);


Retornar