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!