Gostaria de que, quando um elemento fosse clicado, desse um get nas coordenadas dele na página.
A questão nem é o evento onclick, mas como eu faço para pegar essas coordenadas?
Sem libs/frameworks, por favor.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePodes usar o .getBoundingClientRect()
assim:
function posicao(e) {
var el = this;
var coordenadas = el.getBoundingClientRect();
console.log('posição x', coordenadas.left, 'posição y', coordenadas.top)
}
function posicao(e) {
var el = this;
var coordenadas = el.getBoundingClientRect();
var res =
console.log('posição x', coordenadas.left, 'posição y', coordenadas.top)
}
document.getElementById('meio').addEventListener('click', posicao);
document.getElementById('fundo').addEventListener('click', posicao);
#meio, #fundo {
background: #ccd;
padding: 30px;
position: absolute;
border: 2px solid #500;
cursor: pointer;
}
#meio {
top: 50%;
left: 50%;
}
#fundo {
bottom: 0;
right: 0;
}
<div id="meio"></div>
<div id="fundo"></div>
html
<div onmousemove="showCoords(event)" onmouseout="clearCoor()" onclick="getCoor(event)"></div>
js
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
}
function getCoor(event) {
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo2").innerHTML = coor;
}