Obtener elemento en la posición especificada - JavaScript

133

Usando Javascript, ¿cómo puedo identificar el elemento en una posición determinada? Básicamente, estoy buscando escribir una función que tome dos parámetros de entrada (las coordenadas xey) y devuelva el elemento html en la posición en la pantalla representada por los parámetros.

javascript html dom

— kjv
fuente

elementsFromPoint

— Janus Troelsen

Respuestas:

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
fuente

Si solo existiera document.elementsFromPointtambién, en caso de que los elementos se superpongan.

— Seiyria

Estoy sorprendido de que esto funcionó, es decir, 5.5 y no se usa mucho hoy.

— Vlad Nicula

He probado este método y mide la posición de acuerdo con el documento. ¿Cómo lo uso en relación con el elemento padre?

— Charas

Si en la coordenada x, y, hay un marco o iframe, obtendrá el marco, en lugar del elemento en esa ubicación.

— Elmue

document.elementsFromPointestá disponible en los últimos navegadores habilitados para Webkit y Gecko, aunque sea experimental. Ver MDN .

— zopieux

Puede utilizar el elementFromPoint(x, y)método nativo de JavaScript , que devuelve el elemento en las coordenadas x, y en la ventana gráfica.

Ver el elemento elementFromPoint w3c draft

Y, una muestra 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 fragmento

Puede usar setInterval()para verificar continuamente el evento de desplazamiento del elemento, pero no se recomienda, intente usar .hover(...)y css para mejorar el rendimiento de la aplicación.

— Andrés Morales
fuente