Obter elemento na posição especificada - JavaScript

133

Usando Javascript, como posso identificar o elemento em uma determinada posição? Basicamente, estou procurando escrever uma função que use dois parâmetros de entrada (as coordenadas x e y) e retorne o elemento html na posição na tela representada pelos parâmetros.

javascript html dom kjv
fonte
3
elementsFromPoint
Janus Troelsen

Respostas:

241 
document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

rahul
fonte
22
Se ao menos houvesse document.elementsFromPointtambém - caso os elementos estejam sobrepostos.
Seiyria
2
Estou surpreso que isso funcionou em 5,5 e não é muito usado hoje.
Vlad Nicula
Eu tentei esse método e ele mede a posição de acordo com o documento. Como eu o uso em relação ao elemento pai?
Charas
Se na coordenada x, y, houver um quadro ou iframe, você obterá o quadro, em vez do elemento nesse local.
Elmue
13
document.elementsFromPointestá disponível nos recentes navegadores habilitados para Webkit e Gecko, embora experimentais. Veja MDN .
Zopieux 4/03/16
27

Você pode usar o JavaScript nativo elementFromPoint(x, y) método , que retorna o elemento nas coordenadas x, y na viewport.

Veja o rascunho elementFromPoint w3c

E, um exemplo de código:

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}
<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>
Expandir snippet

Você pode usar setInterval()para verificar continuamente o evento de foco do elemento, mas não é recomendável, tente usar .hover(...)css para aprimorar o desempenho do aplicativo.

Andrés Morales
fonte