-
Cómo obtener la posición actual del ratón en Javascript
-
Cuando los visitantes del sitio mueven sus cursores del ratón, se puede realizar un seguimiento de los movimientos usando JavaScript. Una vez conocido el coordenadas X e Y del cursor del usuario, se puede programar la aplicación para interactuar con el ratón. Crear rutas de cursor que siguen el cursor, animar objetos en la pantalla o incluso escribir juegos que interactúan con el ratón de un usuario. Para capturar los movimientos del ratón en una página Web, adjuntar un controlador de eventos a su documento, y añadir un poco de JavaScript para su página.Instrucciones
1 Abra cualquier documento HTML y añadir este código a su sección <body>:
<body onMouseMove = "getCoordinates (eventos);" >
<Textarea id = "filas TextArea1" = "5" cols = "80"> </ textarea>
La propiedad onmousemove crea un evento que se activa cuando se mueve el puntero del ratón sobre el cuerpo de una página Web. Cuando se activa el evento, se llama a la función de JavaScript llamado getCoordinates. La segunda línea de código crea un control área de texto que muestra las posiciones del ratón mientras se mueve el ratón.
2 Añadir esta función JavaScript a la sección <head> del documento:
<Script type = "text / javascript">
getCoordinates function (event) {
var = screenX event.screenX;
var = screenY event.screenY;
var = clientX event.clientX;
var = clientY event.clientY;
si (event.pageX) {
var = pageX event.pagex;
var = pageY event.pageY;
}
else {
pageX = event.clientX + document.body.scrollLeft;
pageY = event.clientY + document.body.scrollTop;
}
var = coordenadas
"ScreenX =" + + screenX ".. screenY =" + + screenY
".. ClientX =" + + clientX ".. clientY =" + + clientY
".. PageX =" + + pageX ".. pageY =" + pageY;
var textArea = document.getElementById ( "TextArea1");
textArea.value = coordenadas;
} </ Script>
Esta función se ve en el "evento" que se le pasa cuando se produce el movimiento del ratón. La función a continuación, almacena los valores clientX, clientY, pageX, pageY, y screenX y screenY del evento en seis variables. Las dos últimas líneas de visualización del código de esos valores en el área de texto al mover el ratón.
3 Guarde el documento HTML y abrirlo en un navegador. A medida que mueve el puntero del ratón por la página web, que muestra la ubicación del puntero.
Consejos y advertencias
- Tenga en cuenta que la función de JavaScript captura coordenadas X e Y para los tres tipos de propiedades: cliente, de página y pantalla. ClientX y clientY, por ejemplo, mantener la posición del ratón relativa al área de cliente del navegador. ScreenX y screenY muestran la posición relativa a la totalidad de la pantalla. El valor es igual al valor pageX clientX más cualquier desplazamiento que se produce cuando el usuario se desplaza hacia la izquierda o hacia la derecha. El valor es igual al valor pageY clientY más cualquier desplazamiento que se produce cuando el usuario se desplaza hacia arriba o abajo. Estos valores de "página" son útiles para detectar la posición del ratón en relación con el borde superior izquierdo de la página Web real, independientemente de lo lejos que el usuario se desplaza horizontal o verticalmente.
