Para programar algumas ações em resposta ao movimento do cursor na janela do navegador, às vezes é necessário determinar suas coordenadas. Isso pode ser feito por um script que tem a capacidade de rastrear eventos que ocorrem no navegador. Um script JavaScript do lado do cliente tem esse recurso. Abaixo está descrita uma das opções para obter as coordenadas do cursor utilizando as capacidades desta linguagem.
Instruções
Passo 1
Use as propriedades do objeto de evento para obter as coordenadas atuais do cursor. Este objeto possui todo um conjunto de propriedades que são relevantes para determinar as coordenadas do cursor do mouse. A propriedade LayerX contém a distância medida em pixels da borda esquerda da camada atual e LayerY - a mesma distância de sua borda superior. Essas duas propriedades têm sinônimos - em vez de event. LayerX, você pode escrever event.x, e em vez de event. LayerY, você pode escrever event.y. As propriedades pageX e pageY mantêm as coordenadas horizontais e verticais do cursor em relação à borda superior esquerda da janela do navegador, e as propriedades screenX e screenY mantêm valores semelhantes em relação à tela do monitor.
Passo 2
Adicione verificação de tipo de navegador ao seu código e use as propriedades clientX e clientY além das propriedades acima no objeto de evento. Isso é necessário porque a Microsoft usa uma designação de propriedade diferente em seu navegador Internet Explorer. Você pode combinar as duas abordagens para determinar as coordenadas, por exemplo:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
etapa 3
Coloque o código de definição de coordenadas em uma função personalizada. Por exemplo:
function GetMouse (evevnt) {
var coordenada X = 0, coordenada Y = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
retornar {"coordX": coordinateX, "coordY": coordinateY};
}
Esta função retorna uma matriz de dois elementos nomeados, o primeiro dos quais (com a chave coordX) contém a coordenada X e o segundo (coordY) contém a coordenada Y.
Passo 4
Chame esta função em algum evento - por exemplo, no evento de movimento do mouse (onmousemove) no contexto do documento. O exemplo abaixo usa uma função para enviar as coordenadas do mouse para a barra de status:
document.onmousemove = função (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
