 |
Evento mousemove.
Método mousemove()
El evento mousemove ocurre siempre que el puntero del mouse se mueve dentro del elemento seleccionado.
El método mousemove () activa el evento mousemove o adjunta una función para que se ejecute cuando ocurre un evento mousemove.
Nota: Cada vez que un usuario mueve el mouse un píxel, ocurre un evento mousemove. Se necesitan recursos del sistema para procesar todos los eventos de mousemove. Utilice este evento con cuidado.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});
});
</script>
</head>
<body>
<p>El mouse está en las coordenadas:: <span></span>.</p>
</body>
</html>
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.
<!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="func14.js"></script> </body> </html>
func14.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);