27.03.2025

Obtendo Coordenadas X e Y no Clique do Mouse em JavaScript

Resposta Rápida

Para obter as coordenadas X e Y de um clique do mouse, você pode usar o seguinte código JavaScript:

document.onclick = (e) => console.log(`Coordenadas do clique: X = ${e.clientX}, Y = ${e.clientY}`);

Com este script simples, você será capaz de determinar as posições X e Y de cada clique na página.

Entendendo o Objeto MouseEvent

Determinar as coordenadas do cursor após um clique é feito usando o objeto MouseEvent e suas propriedades: clientX, clientY, pageX e pageY.

• clientX e clientY fornecem coordenadas relativas à área visível da página. Esses valores não mudam ao rolar a página.
• pageX e pageY mostram coordenadas relativas à página inteira. Se algum desses retornar undefined, significa que essas propriedades não são suportadas pelo navegador específico. Nesses casos, é melhor usar clientX e clientY.

function printMousePos(e) {
    console.log(`Coordenadas na página: X = ${e.pageX}, Y = ${e.pageY}`);
    console.log(`Coordenadas relativas à área visível: X = ${e.clientX}, Y = ${e.clientY}`);
}
document.addEventListener('click', printMousePos);

Combinando Simplicidade com Compatibilidade

Do ponto de vista da compatibilidade com diferentes navegadores, recomenda-se usar clientX e clientY. Se você precisa determinar coordenadas relativas ao elemento que foi clicado, é útil usar event.offsetX e event.offsetY.

function getCoordsRelativeToElement(event) {
    console.log(`Coordenadas relativas ao elemento: X = ${event.offsetX}, Y = ${event.offsetY}`);
}
document.addEventListener('click', getCoordsRelativeToElement);

Ao criar interfaces interativas que requerem monitoramento das coordenadas do mouse em tempo real, você pode usar a seguinte abordagem:

document.onmousemove = (e) => {
    document.getElementById("liveCoords").textContent = `X = ${e.clientX}, Y = ${e.clientY}`;
};

Tratando Eventos em Situações Mais Complexas

Se você precisa implementar um mecanismo para rastreamento de coordenadas em aplicações complexas, como jogos, é importante:

• Garantir acesso global à sua função
• Verificar a funcionalidade do código em vários navegadores
• Garantir que não haja conflitos com outros scripts que possam afetar o tratamento de eventos

Ao usar pageX e pageY, considere os efeitos do rolar da página, pois isso altera os valores obtidos.

Ajustando Sua Implementação

Se suas definições de coordenadas do mouse não corresponderem às suas expectativas, é aconselhável verificar o seguinte:

• Garantir a correção do seu arquivo game.js ou de outros manipuladores
• Resolver conflitos com outros scripts
• O console do navegador ajudará a identificar onde pode estar o problema

Exibindo Coordenadas do Clique para o Usuário

Para mostrar ao usuário as coordenadas do clique, você pode usar o seguinte código:

document.addEventListener('click', function(event) {
    let coordDisplay = document.getElementById("coordDisplay");
    coordDisplay.textContent = `X = ${event.clientX}, Y = ${event.clientY}`;
});

Aqui, usamos um elemento com o identificador coordDisplay para exibir as coordenadas após cada clique.

Visualização

O exemplo abaixo demonstra como exibir locais de cliques na página, semelhante a marcadores em um mapa:

document.addEventListener('click', function(event) {
    const flagX = event.pageX;
    const flagY = event.pageY;
});

Cada clique coloca uma espécie de "marcador" na sua página, semelhante a um sistema de colocação de marcadores em um mapa.

Considerando CSS e Design Responsivo

Ao trabalhar com coordenadas de clique, é essencial considerar as nuances de CSS e design responsivo. Ao posicionar elementos da interface com base nas coordenadas de clique, certifique-se de levar em conta os tamanhos de tela, resoluções, além de margens e preenchimentos para alcançar as coordenadas de clique mais precisas.

Recursos Úteis

1. Propriedade clientX do Objeto MouseEvent - Web API | MDN
2. Rastreamento da Posição do Mouse em JavaScript - Stack Overflow
3. Introdução a Trabalhar com Eventos do Navegador
4. Propriedades de Eventos em JavaScript
5. .offset() | Documentação da API jQuery
6. Posicionamento do Mouse Usando JavaScript (Exemplo no CodePen)

Video

Navigation