Como obter coordenadas do mouse em JavaScript

Ao navegar pelas páginas da web, existe a possibilidade de que você queira localizar um cursor com defeito ou é necessário buscar as coordenadas do documento geral para clareza ao projetar um site., ou pode ser necessário criar várias seções em uma página da web e alinhá -las. Nesses casos, obter coordenadas de mouse em JavaScript pode ajudá -lo.

Este artigo discutirá os métodos para obter coordenadas do mouse em JavaScript.

Como obter coordenadas do mouse em JavaScript?

Para obter coordenadas de mouse em JavaScript, o “ClientX" e "Cliente”As propriedades podem ser usadas com:

• ““ONCLICKEvento
• ““PageX" e "Pagey”Propriedades com“addEventListener ()”Método
• ““onmouseMoveEvento e “getElementById ()”Método

Agora passaremos por cada uma das metodologias listadas uma por uma!

Método 1: Obtenha coordenadas do mouse em JavaScript usando o OnClick Event

O "ClientX" e "ClienteAs propriedades são usadas para devolver as coordenadas horizontais e verticais do ponteiro do mouse, respectivamente. Considerando que um “ONCLICK”O evento é acionado quando o usuário clica em um elemento. Esses métodos podem ser implementados para acessar as coordenadas horizontais e verticais do mouse, localizando a última posição do ponteiro com a ajuda de um botão especificado.

Sintaxe

objeto.OnClick = mousecoordinates () myscript;

Na sintaxe acima, “mousecoordinates ()”Refere -se à função que será invocada quando um botão for clicado.

Exemplo

Em primeiro lugar, crie um botão com um evento onclick redirecionando para a função Mousecoordinates () quando é acionado:

Clique em mim para obter as coordenadas do mouse

Em seguida, defina uma função chamada “mousecoordinates ()”Que toma o evento como um argumento. Quando os eventos especificados são acionados, o “ClientX" e "Cliente”As propriedades retornam os valores de coordenadas X e Y atualizados do mouse:

função mousecoordenates (evento)
documento.escreva ("coordenada (x) =" + evento.ClientX + "
Coordenada (y) = " + evento.cliente);

A implementação acima resulta na seguinte saída:

Em caso de obter as coordenadas do mouse de todo o DOM ao rolar, utilize o método abaixo.

Método 2: Obtenha coordenadas do mouse em JavaScript usando PageX e Pagey Properties com o método addEventListener ()

O "PageX" e "PageyAs propriedades retornam as coordenadas horizontais e verticais, respectivamente, referindo -se ao “Modelo de objeto de documento (DOM)”Sobre o mouse pairando e o“addEventListener ()”Método que anexa um manipulador de eventos a um documento. Esses métodos podem ser aplicados para obter os valores de coordenadas da tela visível e de todo o DOM ao rolar.

Sintaxe

documento.addEventListener (mousemove, mousecoordinates)

Na sintaxe acima, “clique”Refere -se ao evento especificado e“mousecoordina”É a função na qual o evento precisa ser aplicado.

Exemplo

Em primeiro lugar, ajuste a altura do DOM geral na página da web para obter o valor da coordenada “Pagey“Ao rolá -lo:

Em seguida, defina uma função chamada “mousecoordinates ()"Que aceita a variável"evento”Como um argumento, conforme discutido no método anterior. Essa variável específica será utilizada para acessar o valor das propriedades PageX, Pagey, ClientX e Clienty para obter os valores de coordenadas da página completa da Web e da tela visível após a rolagem:

função mousecoordenates (evento)
console.log ("PageX:", evento.PageX,
"Pagey:", evento.Pagey,
"ClientX:", evento.ClientX,
"Cliente:", evento.cliente)

Finalmente, adicione um evento chamado “mousemove" e a "mousecoordina”Como a função que será invocada para obter as coordenadas enquanto o ponteiro está se movendo:

janela.addEventListener ('mousemove', mousecoordenates);

Saída

Na saída acima, pode -se observar que, ao rolar para baixo, o valor de “Pagey”Aumenta com o aumento do“eixo y”Do DOM.

Método 3: Obtenha coordenadas do mouse em JavaScript usando o OnMouSEMove Event e GetElementBbyId () Método

O "onmouseMove”O evento é acionado quando o ponteiro está se movendo em um elemento específico, e o“getElementById ()”O método busca um elemento com um ID especificado. Esses métodos podem ser aplicados para exibir os valores de coordenadas flutuantes sobre o mouse pairar no DOM.

Sintaxe

documento.getElementById (ElementId)

Aqui, "ElementId”Refere -se ao ID especificado do elemento adicionado.

Exemplo

Em primeiro lugar, atribua um ID chamado “saída”Para o parágrafo. Então, aplique o “onmouse”Evento ao documento geral e atribui -lhe a função mousecoordinates () que será invocada de acordo:

documento.onMouseMove = Mousecoordenates;

Na próxima etapa, busque o elemento de parágrafo criado especificando seu ID no documento.getElementById () Método:

var output = documento.getElementById ('saída');

Aqui, defina uma função chamada “mousecoordinates ()”Tomando o evento como um argumento, conforme discutido nos métodos anteriores. Em sua definição de função, utilize o “ClientX" e "Cliente”Propriedades com o evento para obter o“X" e "Y”O mouse coordena ao mover o cursor.

Finalmente, exiba as coordenadas correspondentes no DOM em relação à posição do cursor como o inerhtml do parágrafo buscado nomeado como “saída”:

função mousecoordenates (evento)
var xpos = evento.clientex;
var ypos = evento.Cliente;
saída.inerhtml = "Coordenada (x):" + xpos + "" + "pixels
Coordenada (y): " + ypos +" " +" pixels ";

Saída

Este artigo compilou os métodos para obter coordenadas do mouse em JavaScript.

Conclusão

Para obter coordenadas do mouse em JavaScript, aplique o “ClientX" e "Cliente”Propriedades com o evento OnClick para obter as mais recentes coordenadas do mouse no clique do botão, o“ “PageX" e "Pagey”Propriedades e“addEventListener ()”Método para obter as coordenadas do DOM geral e da tela atual ou com um“onmouseMoveEvento e “getElementById ()”Método para exibir as coordenadas em mudança de pairando o mouse. Este blog demonstrou os métodos para obter coordenadas do mouse em JavaScript.