Seguimiento de la posición del mouse en JavaScript
- Varias formas de rastrear eventos del mouse en JavaScript
-
Seguimiento de la posición del mouse utilizando
PageX,PageYyclientX,clientYen JavaScript
Para rastrear el movimiento del mouse en JavaScript, usamos un detector de eventos. Un oyente de eventos es algo que sigue escuchando los cambios que están sucediendo. Por ejemplo, un evento mousedown solo se activa cuando un usuario hace clic en el botón del mouse.
Hay varios eventos de mouse disponibles en JavaScript, de los cuales nos centraremos en el evento mousemove ya que queremos rastrear la posición del mouse. Para ver una lista completa de eventos del mouse, puede visitar los documentos MDN de eventos del mouse.
Varias formas de rastrear eventos del mouse en JavaScript
Para rastrear la posición del mouse, tenemos que encontrar su axis x (posición horizontal) y el axis y (posición vertical) dentro de la pestaña del navegador. Es posible que sepa que la esquina superior izquierda del navegador está representada con (0,0). Si mueve el mouse horizontalmente, su posición x cambiará, y si mueve el mouse verticalmente, su posición y cambiará.
Hay dos formas diferentes de obtener estas posiciones x e y del ratón dentro de la pestaña del navegador, y estas formas son las siguientes.
- Si desea realizar un seguimiento de las posiciones del mouse en relación con el tamaño de la página web, utilice
pageXypageY. - Si desea rastrear la posición del mouse según el área visible de la pantalla, use
clientXyclientY.
Seguimiento de la posición del mouse utilizando PageX, PageY y clientX, clientY en JavaScript
Entendamos ambas formas con el siguiente ejemplo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;">Div with height 1000px...</div>
<script src="./script.js"></script>
</body>
</html>
Aquí tenemos un documento HTML. Dentro de la etiqueta body, tenemos un elemento div con algo de texto y una height de 1000px. Hay una razón por la que le hemos dado tanta altura a este elemento div. Al proporcionar esta altura al div, obtendremos una barra de desplazamiento dentro de la página web, y esto es necesario para ilustrar las dos formas anteriores de rastrear el movimiento del mouse.
Luego tenemos una etiqueta de secuencia de comandos que vincula la secuencia de comandos siguiente al documento HTML.
function mousemove(event) {
console.log(
'pageX: ', event.pageX, 'pageY: ', event.pageY,
'clientX: ', event.clientX, 'clientY:', event.clientY)
}
window.addEventListener('mousemove', mousemove);
Hemos agregado un evento mousemove al objeto de la ventana usando la función addEventListener en el archivo de script. Esta función toma dos parámetros, el primer parámetro es el evento que queremos agregar. El segundo parámetro es una función que se ejecutará después de que se active el evento.
En este caso, hemos creado la función mousemove() y la hemos pasado como una devolución de llamada al detector de eventos. Esta función toma event como argumento. Esta variable event proporcionará las posiciones x e y actualizadas del ratón. Puede dar cualquier nombre a la función mousemove(), pero debe pasar el nombre exacto del evento al detector de eventos; De lo contrario, no funcionará.
Dentro de la función mousemove(), solo tenemos console.log() los valores del mouse usando event.pageX, event.pageY y event.clientX, event.clientY. La siguiente captura de pantalla ilustra la salida del código anterior.
Al ver la salida en la consola, no verá ninguna diferencia ya que pageX, y clientX muestran los mismos valores, y pageY y clientY muestran los mismos valores. Todavía no hemos desplazado la página, por lo que estamos obteniendo los mismos valores.
Si desplaza la página y luego verifica los valores, habrá una diferencia en los valores. La siguiente captura de pantalla ilustra esto.
Después de desplazarse por la página, los valores proporcionados por los eventos pageX y pageY son mayores que los proporcionados por los eventos clientX y clientY. Esto se debe a que pageX y pageY calculan los valores de x e y desde el inicio de la página web, mientras que clientX y clientY calculan los valores basándose en la parte visible de la pantalla.
Más adelante, también puede tomar estas posiciones del mouse y aplicarlas al elemento HTML (actualizando los valores izquierdo y superior del elemento) para que donde se mueva el cursor del mouse, el elemento también lo siga. Para lograr esto, también debe usar otros eventos del mouse.
Ahora, es posible que tenga una pregunta sobre cuál de estos eventos de mouse usar en la práctica, y la respuesta a esto es que depende del caso de uso. Si desea rastrear la posición del mouse solo dentro del área visible de la pantalla, vaya con clientX y clientY. De lo contrario, puede utilizar los eventos del mouse pageX y pageY para calcular la posición del mouse desde el inicio de la página web.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn