Como rastrear a posição do mouse em javascript

Rastrear uma posição do mouse é uma tarefa interessante que rastreia as coordenadas do ponteiro. Extrai as coordenadas X e Y de toda a página da web ou área especificada definida pelo usuário. JavaScript fornece “ClientX” e “Cliente” Propriedades para rastrear o ponteiro do mouse na janela atual. Essas propriedades descobrem onde está o mouse do usuário nas coordenadas X e Y da janela do navegador. Neste post, demonstraremos o caminho para rastrear uma posição de mouse.

Como rastrear a posição do mouse em javascript?

Em JavaScript, duas propriedades, “ClientX” e “Cliente”, são utilizados para rastrear uma posição de mouse na área visível do navegador. Ambas as propriedades são executadas em uma área especificada fornecida pelo usuário.

A sintaxe do “ClientX" e "Cliente”As propriedades são fornecidas abaixo:

Sintaxe do ClientX

evento.ClientX

O "ClientX”Retorna o eixo horizontal do ponteiro do mouse.

Sintaxe da Cliente

evento.ClientX

Da mesma forma, o “Cliente” A propriedade retorna o eixo vertical com o movimento do ponteiro do mouse.

Exemplo

O exemplo explica o uso do rastreamento da posição do mouse em JavaScript.

Código HTML

Exemplo para rastrear a posição do mouse em JavaScript

X Posição do mouse: .

Y Posição do mouse: .

A explicação do código é a seguinte:

• Em primeiro lugar, o div A tag é criada e um "Div1”ID está atribuído a ele.
• Propriedades diferentes, incluindo altura, largura, fronteira, e posição, são aplicados dentro marcação.
• Depois disso, o getCursorposition () o método é utilizado por passar um "evento".
• Depois disso, o “X Posição do Mouse” e “Y do mouse da posição” são extraídos com o movimento do cursor.
• No final, o caminho de origem do arquivo JavaScript é atribuído "teste.js " dentro de marcação.

O código para o “teste.JS”O arquivo é fornecido abaixo:

Código JavaScript

função getCursorposition (evento)
documento.getElementById ("c_p_x").TextContent = Evento.clientex;
documento.getElementById ("c_p_y").TextContent = Evento.Cliente;

Neste código:

• Em primeiro lugar, o getCursorposition () o método é chamado e um argumento é aprovado pelo nome "evento".
• Depois disso, o documento.getElementById é utilizado para extrair os elementos html cujos IDs são "C_P_X" e “C_P_Y”.
• O evento.ClientX Retorna a coordenada horizontal com base na área do cliente e no "evento.Cliente ” é empregado retornando a coordenada vertical no navegador.

Saída

A saída mostra que “X Posição do Mouse” e “Y do mouse da posição” são rastreados mudando a posição do mouse no navegador.

Conclusão

Em JavaScript, o “ClientX” e “Cliente” Propriedades rastreiam a posição do mouse. Essas propriedades podem ser combinadas com uma função definida pelo usuário para obter as coordenadas da posição do mouse. Este post demonstrou o método para rastrear a posição do mouse em JavaScript usando o “ClientX" e "Cliente”Propriedades. O exemplo praticado aqui mostra que o coordenada x e coordenada y são atualizados dinamicamente sempre que um mouse se move.