Para programar algunas acciones en respuesta al movimiento del cursor en la ventana del navegador, a veces es necesario determinar sus coordenadas. Esto se puede hacer mediante un script que tiene la capacidad de rastrear eventos que ocurren en el navegador. Un script JavaScript del lado del cliente tiene esta capacidad. A continuación se describe una de las opciones para obtener las coordenadas del cursor utilizando las capacidades de este lenguaje.
Instrucciones
Paso 1
Utilice las propiedades del objeto de evento para obtener las coordenadas actuales del cursor. Este objeto tiene un conjunto completo de propiedades que son relevantes para determinar las coordenadas del cursor del mouse. La propiedad LayerX contiene la distancia medida en píxeles desde el borde izquierdo de la capa actual y LayerY, la misma distancia desde su borde superior. Estas dos propiedades tienen sinónimos: en lugar de event. LayerX, puede escribir event.x, y en lugar de event. LayerY, puede escribir event.y. Las propiedades pageX y pageY contienen las coordenadas horizontales y verticales del cursor en relación con el borde superior izquierdo de la ventana del navegador, y las propiedades screenX y screenY tienen valores similares en relación con la pantalla del monitor.
Paso 2
Agregue la verificación del tipo de navegador a su código y use las propiedades clientX y clientY además de las propiedades anteriores en el objeto de evento. Esto es necesario porque Microsoft utiliza una designación de propiedad diferente en su navegador Internet Explorer. Puede combinar ambos enfoques para determinar las coordenadas, por ejemplo, así:
if (evevnt.pageX || evevnt.pageY) {
coordinarX = evevnt.pageX;
coordenadaY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
CoordinarX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinadaY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Paso 3
Coloque el código de definición de coordenadas en una función personalizada. Por ejemplo:
function GetMouse (evevnt) {
var coordenadaX = 0, coordenadaY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinarX = evevnt.pageX;
coordenadaY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
CoordinarX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinadaY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordenadaX, "coordY": coordenadaY};
}
Esta función devuelve una matriz de dos elementos con nombre, el primero de los cuales (con la tecla coordX) contiene la coordenada X y el segundo (coordY) contiene la coordenada Y.
Paso 4
Llame a esta función en algún evento, por ejemplo, en el evento de movimiento del mouse (onmousemove) en el contexto del documento. El siguiente ejemplo utiliza una función para enviar las coordenadas del mouse a la barra de estado:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
