¿Cómo encuentro el nodo DOM que está en una posición determinada (X, Y)? (Prueba de impacto)

Question

Tengo las coordenadas (X, Y) de un punto en un documento HTML. ¿Cómo determino qué nodo DOM está en esas coordenadas?

Algunas ideas:

• ¿Existe un DOM golpeó función de prueba que echaba de menos, que se lleva a un punto (X, Y) y devuelve el elemento DOM allí?
• ¿Hay una manera eficiente de recorrer el árbol de elementos DOM para encontrar el elemento que lo contiene? Parece que sería complicado debido a elementos absolutamente posicionados.
• ¿Hay alguna manera de simular un evento en una posición dada (X, Y) de modo que el navegador termine creando un objeto de evento que tenga un puntero al elemento?

(Antecedentes:. Estoy incrustar QWebView de Qt en una aplicación nativa que estoy tratando de variar el menú de contexto que el widget Qt proporciona basa en el nodo DOM que el ratón está sobre, pero Qt 4.5 no puede golpear prueba a un elemento DOM, aunque esa funcionalidad viene en 4.6. Así que espero poder lanzar la coordenada a Javascript y hacer las pruebas de detección allí con DOM API.)

¡Gracias!

Answer 1

Mientras que los usuarios no están utilizando versiones antiguas de Safari, Chrome u Opera, estás de suerte: el uso document.elementFromPoint(x, y) (MSDN ref, Mozilla ref, QuirksMode article):

Devuelve el elemento del documento ... que es el elemento superior que se encuentra debajo del punto dado.

Si tiene que soportar los navegadores más antiguos, no puedo pensar en muchas opciones diferentes de lo que usted sugiere (atravesar toda la DOM, mirando a las posiciones y tamaños de los elementos y ver si alguno de ellos encapsulan su (x, y)).

No creo que la simulación de eventos funcione, pero es una idea interesante. Mi comprensión del envío de eventos es que especifiques el objetivo para el que está el evento, que es precisamente lo que estás tratando de averiguar en primer lugar.

Answer 2

En IE existen document.body.componentFromPoint(x,y). No sé si hay una implementación de navegador cruzado.

Answer 3

Probablemente esta no sea la mejor solución, pero puede recorrer el árbol dom comenzando por encontrar coordenadas de los nodos antecesores que contienen sus posiciones x e y llegar rápidamente al nodo hoja que contiene sus coordenadas. Para obtener las posiciones de un nodo de forma cruzada, puede consultar los kits de herramientas de JS. Uno que he usado es dojo. Echar un vistazo a dojo._getMarginBox here

Answer 4

document.elementFromPoint(x,y) 

documentada here para Firefox 3 y here para IE, pero ver quirksmode las diferencias entre navegadores.

Answer 5

Puede usar jQuery para eso. Me gustaría enlazar todos los elementos dom necesarios para el evento click, esto me dará el objeto dom adecuado al hacer clic, así como mouse position.