Dada una coordenada x, y, necesito encontrar todos los elementos html

Question

Estoy compilando una aplicación donde necesito repetidamente obtener listas de elementos html sentados en una ubicación específica (x, y relativa a la ventana gráfica, por ejemplo) . Estoy considerando los siguientes enfoques, pero ninguno es satisfactorio:

(1) Vaya a través del html, construya una estructura de datos que haga un seguimiento de la posición x, y de cada elemento (x, y -> conjunto de elementos), y luego acceda a esta estructura de datos cuando necesite hacer una búsqueda. Desafortunadamente, este enfoque es un poco engorroso y estoy buscando una mejor manera de resolver este problema. Además, me temo que puede ser demasiado lento.

(2) Un enfoque probablemente mejor que estoy considerando es agregar temporalmente un controlador de eventos de nivel superior que capture todos los eventos de desplazamiento, para simular un movimiento del mouse en la posición particular y luego quitar el controlador, pero parece que esto solo devolverá el elemento superior (por ejemplo, si hay un montón de divs de posición absoluta sobre una ubicación particular, creo que solo devolverá el que tenga el índice z más alto, mientras que lo necesito todo, aunque No estoy seguro).

(3) Para IE, hay componentFromPoint (x, y), pero no puedo encontrar un equivalente en otro navegador - eso y solo devuelve el elemento superior.

Tenga en cuenta que la aplicación está construida como un marcador y no tengo control sobre el html subyacente; esto, lamentablemente, restringe todas las soluciones fáciles del lado del servidor.

Estoy dispuesto a utilizar las bibliotecas (actualmente en jquery).

FYI, hasta ahora el mejor que he encontrado aquí es Getting DIV id based on x & y position; preguntándose si hay algo más actualizado.

Answer 1

Quizás esté buscando el método elementFromPoint que existe en MSIE, FF3 + y de alguna forma en Safari y Opera. También vale la pena echarle un vistazo al getBoundingClientRect. Combina los dos y deberías estar en el negocio.

También puede acelerar el enfoque n. ° 1 manteniendo la estructura calculada entre las búsquedas y solo recalcularla cuando ocurran realmente cambios en la página. Observe cómo los motores de selección (Sizzle in partial) almacenan en caché sus búsquedas y expira la caché cuando cambia el DOM.

Puede parecer artificioso, pero el cálculo de la posición de cada elemento es lo que los controladores de arrastrar y soltar han estado haciendo hasta ahora. Hay una docena de gratuitas que tienen esto optimizado correctamente (mi corazonada es que los YUI tendrán el código más legible). Sin embargo, estos pueden tener fecha o tratar de admitir navegadores que no desea/necesita.