Cómo conseguir coordenadas de ratón en JavaScript
Este artículo discutirá los métodos para obtener coordenadas del ratón en JavaScript.
Cómo conseguir coordenadas de ratón en JavaScript?
Para obtener coordenadas del ratón en JavaScript, el "clerx" y "clery"Las propiedades se pueden usar con:
- "al hacer clic" evento
- "Pagex" y "pagina"Propiedades con"addEventListener ()" método
- "municipal"Evento y"getElementById ()" método
Ahora pasaremos por cada una de las metodologías enumeradas una por una!
Método 1: Obtenga coordenadas de mouse en JavaScript usando el evento OnClick
El "clerx" y "cleryLas propiedades se utilizan para devolver las coordenadas horizontales y verticales del puntero del mouse, respectivamente. Mientras que un "al hacer clicEl evento se activa cuando el usuario hace clic en un elemento. Estos métodos se pueden implementar para acceder a las coordenadas horizontales y verticales del mouse localizando la última posición del puntero con la ayuda de un botón específico.
Sintaxis
objeto.onClick = mouseCoordinates () myScript;En la sintaxis anterior, "Mousecoordinados ()"Se refiere a la función que se invocará cuando se haga clic en un botón.
Ejemplo
En primer lugar, cree un botón con un evento OnClick que redirige a la función MouseCoordinates () cuando se active:
A continuación, defina una función llamada "Mousecoordinados ()"Que toma el evento como argumento. Cuando se activan los eventos especificados, el "clerx" y "clery"Las propiedades devuelven los valores de coordenadas X e Y actualizados del mouse:
function MouseCoordinates (evento)documento.escribir ("coordenate (x) =" + evento.ClientX + "
Coordinar (y) = " + evento.Clienty);
La implementación anterior da como resultado la siguiente salida:
En caso de obtener las coordenadas del mouse de todo el DOM al desplazarse, utilice el siguiente método.
Método 2: Obtenga coordenadas de mouse en JavaScript usando Pagex y Pagey Propiedades con el método AddEventListener ()
El "Pagex" y "pagina"Las propiedades devuelven las coordenadas horizontales y verticales, respectivamente, refiriéndose al"Modelo de objetos de documento (DOM)"Sobre el ratón flotante y el"addEventListener ()"Método que adjunta un controlador de eventos a un documento. Estos métodos se pueden aplicar para obtener los valores de coordenadas de la pantalla visible y todo el DOM al desplazarse.
Sintaxis
documento.AddEventListener (MouseMove, Mousecoordinados)En la sintaxis anterior, "hacer clic"Se refiere al evento especificado y"mousecoordenados"¿Es la función en la que se debe aplicar el evento?.
Ejemplo
En primer lugar, ajuste la altura del DOM general en la página web para obtener el valor coordinado "pagina"Al desplazarlo:
A continuación, defina una función llamada "Mousecoordinados ()"Eso acepta la variable"evento"Como argumento como se discutió en el método anterior. Esta variable particular se utilizará para acceder al valor de Pagex, Pagey, ClientX y las propiedades de los clientes para obtener los valores de coordenadas de la página web completa y la pantalla visible al desplazarse:
function MouseCoordinates (evento)consola.Log ("Pagex:", evento.Pagex,
"Pagey:", evento.pagina,
"ClientX:", evento.clerx,
"Clienty:", evento.Clienty)
Finalmente, agregue un evento llamado "movimiento del ratón" y el "mousecoordenados"Como la función que se invocará para obtener las coordenadas mientras el puntero se mueve:
ventana.addEventListener ('MouseMove', mousecoordinados);Producción
En la salida anterior, se puede observar que mientras se desplaza hacia abajo, el valor de "pagina"Aumenta con el aumento en el"eje y"Del DOM.
Método 3: Obtenga coordenadas del mouse en JavaScript utilizando el evento OnmouseMove y el método GetElementBById ()
El "municipal"El evento se activa cuando el puntero se mueve en un elemento específico y el" "getElementById ()"El método obtiene un elemento con una identificación específica. Estos métodos se pueden aplicar para mostrar los valores de coordenadas fluctuantes sobre el ratón flotante en DOM.
Sintaxis
documento.getElementById (ElementId)Aquí, "elemento"Se refiere a la ID especificada del elemento agregado.
Ejemplo
En primer lugar, asigne una identificación llamada "producción"Al párrafo. Luego, aplique el "en el mouse"Evento al documento general y asigna la función MouseCoordinates () que se invocará en consecuencia:
documento.onmousemove = mousecoordinados;
En el siguiente paso, obtenga el elemento de párrafo creado especificando su ID en el documento.Método GetElementById ():
salida var = documento.getElementById ('salida');Aquí, defina una función llamada "Mousecoordinados ()"Tomar el evento como un argumento como se discutió en los métodos anteriores. En su definición de función, utilice el "clerx" y "clery"Propiedades con el evento para obtener el"X" y "Y"El mouse coordina al mover el cursor.
Finalmente, muestre las coordenadas correspondientes en el DOM con respecto a la posición del cursor como el interno del párrafo recuperado llamado "producción":
function MouseCoordinates (evento)var xpos = evento.ClientX;
var ypos = evento.clienty;
producción.innerhtml = "coordinado (x):" + xpos + "" + "píxeles
Coordenada (y): " + yPos +" " +" píxeles ";
Producción
Este artículo ha compilado los métodos para obtener coordenadas del ratón en JavaScript.
Conclusión
Para obtener coordenadas del mouse en JavaScript, aplique el "clerx" y "clery"Propiedades con el evento OnClick para obtener las últimas coordenadas del mouse en el clic del botón, el" "Pagex" y "pagina"Propiedades y"addEventListener ()"Método para obtener las coordenadas tanto del DOM general como de la pantalla actual o con un"municipal"Evento y"getElementById ()Método para mostrar las coordenadas cambiantes al pasar el ratón. Este blog demostró los métodos para obtener coordenadas de ratones en JavaScript.