Método de obtenção da posição atual do mouse usando JavaScript

Às vezes, precisamos obter a distância de arrastamento da janela ou do movimento do mouse, neste caso, podemos calcular a posição do cursor no documento antes e após para obter o resultado desejado. A seguir, são apresentadas algumas propriedades de evento:

1、posição de coordenadas da área de cliente

　　Os eventos de mouse ocorrem em posições específicas dentro da visão do navegador. Essa informação de posição é armazenada nas propriedades clientX e clientY do objeto de evento. Seus valores representam as coordenadas horizontais e verticais do cursor do mouse na visão do navegador no momento do evento (sem considerar a distância da rolagem da página). Veja o exemplo a seguir:

var div = document.getElementById("myDiv"); //Obter o elemento
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordenadas da tela: " + event.screenX + " + event.screenY);
});

Nota: onde, EventUtil.on() representa a ligação de eventos ao elemento, EventUtil.getEvent(event) representa a obtenção do objeto de evento. EventUtil é um objeto de evento personalizado (implementado em JavaScript), que contém alguns métodos cross-browser. A implementação específica, consulte outro artigo <Some Cross-Browser Event Methods>. Se o projeto usar plugins jQuery, pode ser substituído pelo método correspondente.

2、posição de coordenadas da página

　　As propriedades do objeto de evento pageX e pageY, podem informar a posição específica na página onde o evento ocorreu. Em outras palavras, essas propriedades representam a posição do cursor do mouse na página (equivalente às coordenadas do cursor na janela). + distância da rolagem da página).

var div = document.getElementById("myDiv");//Obter o elemento com id "myDiv"
EventUtil.on(div, "click", function(event){//Atribuir evento click ao elemento
 event = EventUtil.getEvent(event);//Obter objeto de evento event
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//IE8e versões anteriores
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("Coordenadas da página: " + pageX + " + pageY);
});

3Localização de coordenadas de tela

　　As propriedades screenX e screenY permitem determinar as coordenadas do cursor em relação à tela inteira no momento do evento do mouse. Como mostrado na figura a seguir:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("Coordenadas da tela: " + event.screenX + " + event.screenY);
});

O artigo é referenciado em 'Programação Avançada em JavaScript, 3ª Edição'

Agradecemos a leitura, esperamos ajudar a todos, obrigado pelo apoio ao site!