Cómo rastrear la posición del mouse en JavaScript

El seguimiento de una posición del mouse es una tarea interesante que rastrea las coordenadas del puntero. Extrae las coordenadas X e Y de toda la página web o área especificada definida por el usuario. JavaScript proporciona "Clientx" y "Clienty" Propiedades para rastrear el puntero del mouse en la ventana actual. Estas propiedades descubren dónde se encuentra el mouse del usuario en las coordenadas X e Y de la ventana del navegador. En esta publicación, demostraremos la manera de rastrear una posición del mouse.

Cómo rastrear la posición del mouse en JavaScript?

En JavaScript, dos propiedades, "Clientx" y "Clienty", se utilizan para rastrear una posición del mouse en el área visible del navegador. Ambas propiedades se ejecutan en un área especificada proporcionada por el usuario.

La sintaxis del "clerx" y "clery"Las propiedades se proporcionan a continuación:

Sintaxis de ClientX

evento.clerx

El "clerx"Devuelve el eje horizontal del puntero del mouse.

Sintaxis de Clienty

evento.clerx

Del mismo modo, el "Clienty" La propiedad devuelve el eje vertical con el movimiento del puntero del mouse.

Ejemplo

El ejemplo explica el uso de la posición de rastreo del mouse en JavaScript.

código HTML

Ejemplo para rastrear la posición del mouse en JavaScript

X Posición del mouse: .

Y Posición del mouse: .

La explicación del código es la siguiente:

• En primer lugar, el div se crea la etiqueta y un "div1"ID se asigna a él.
• Diferentes propiedades, incluida altura, ancho, borde, y posición, se aplican dentro de etiqueta.
• Después de eso, el getCursorPosition () El método se utiliza pasando un "evento".
• Después de eso, el "X Posición del mouse" y "Y Posición del mouse" se extraen con el movimiento del cursor.
• Al final, se asigna la ruta fuente del archivo JavaScript "prueba.JS " dentro etiqueta.

El código para el "prueba.js"El archivo se proporciona a continuación:

Código JavaScript

función getCursorPosition (evento)
documento.getElementById ("C_P_X").TextContent = evento.ClientX;
documento.getElementById ("C_P_Y").TextContent = evento.clienty;

En este código:

• En primer lugar, el getCursorPosition () se llama método y se pasa un argumento "evento".
• Después de eso, el documento.GetElementByid se utiliza para extraer los elementos HTML cuyas ID son "C_P_X" y "C_P_Y".
• El evento.clerx Devuelve la coordenada horizontal en función del área del cliente y el "evento.Clienty " se emplea devolviendo la coordenada vertical en el navegador.

Producción

La salida muestra que "X Posición del mouse" y "Y Posición del mouse" se rastrean cambiando la posición del mouse en el navegador.

Conclusión

En JavaScript, el "Clientx" y "Clienty" Las propiedades rastrean la posición del mouse. Estas propiedades se pueden combinar con una función definida por el usuario para obtener las coordenadas de la posición del mouse. Esta publicación ha demostrado el método para rastrear la posición del mouse en JavaScript utilizando el "clerx" y "clery" propiedades. El ejemplo practicado aquí muestra que el X-coordenada y coordenado se actualizan dinámicamente cada vez que se mueve un mouse.