Encontrar a posição do mouse em elemento com JavaScript

Neste artigo você vai aprender a como encontrar a posição do mouse em elemento, utilizando a linguagem JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Para resolver o nosso problema, vamos precisar determinar o elemento que queremos ter como alvo

Isso pode ser feito através de um método de seleção de DOM

Provavelmente você vai querer atrelar este recebimento de informação a um evento

Então vamos precisar também adicionar um evento ao elemento

Depois será necessário utilizar o método getBoundingClientRect

Que possui todas as informações sobre o elemento alvo dele, inclusive sua posiçõa na tela

No próprio evento também temos acesso a aonde o mouse se encontra

Através das propriedades clientX e clientY, são as coordenadas x e y do mouse na tela

Subtraindo estes valores das extremidades do elemento, temos o que precisamos

Veja um exemplo prático:

const el = document.querySelector("#element")

el.addEventListener("click", (e) => {

      const rect = e.target.getBoundingClientRect();
      
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      console.log("Esquerda: " + x + " - Topo: " + y);
      
})

// "Esquerda: 5 - Topo: 7"

Na impressão temos a posição do ponteiro do mouse em relação ao elemento

A unidade é pixels, isso pode influenciar no que você precisa fazer

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como encontrar a posição do mouse em elemento em JS

Utilizamos o método getBoundingClientRect que nos dá informações do elemento

Depois bastou subtrair a posição do ponteiro do mouse, que pode ser obtida no evento

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!