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

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

Se ao menos houvesse document.elementsFromPointtambém - caso os elementos estejam sobrepostos.

— Seiyria

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

document.elementsFromPointestá disponível nos recentes navegadores habilitados para Webkit e Gecko, embora experimentais. Veja MDN .

— Zopieux 4/03/16

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