1

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.

0

2 Respostas 2

3

Podes 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)
}

Exemplo:

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>

1
  • 1
    Obrigado, Sergio! 1/04/2017 às 1:36
-2

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;
}
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .