javascript - insertbefore - ¿Cómo encuentro el nodo DOM que está en una posición dada(X, Y)?(Prueba de golpe)

insertbefore javascript ejemplo

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:

• ¿Hay una función de prueba de golpe DOM que perdí, que toma un punto (X, Y) y devuelve el elemento DOM allí?
• ¿Hay una forma 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 forma 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 incorporando el QWebView de Qt en una aplicación nativa. Estoy intentando variar el menú contextual que proporciona el widget Qt en función del nodo DOM sobre el que ha pasado el mouse, pero Qt 4.5 no puede probarlo con un elemento DOM, aunque esa funcionalidad viene en 4.6. Así que espero poder lanzar la coordenada a Javascript y hacer la prueba de éxito allí con DOM API.)

¡Gracias!

Answer 1

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

Answer 2

Probablemente esta no sea la mejor solución, pero puede atravesar el árbol dom comenzando por encontrar coordenadas de los nodos antecesores que contengan sus posiciones xey 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. Echa un vistazo a dojo._getMarginBox here

Answer 3

Puedes usar jQuery para eso. Me gustaría enlazar todos los elementos dom necesarios para el evento click, esto me dará el objeto dom apropiado al hacer clic, así como la posición del mouse .

Answer 4

Siempre que sus usuarios no utilicen las versiones anteriores de Safari, Chrome u Opera, tiene suerte: utilice document.elementFromPoint(x, y) ( ref de MSDN , ref de Mozilla , artículo de QuirksMode ):

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

Si necesita admitir navegadores más antiguos, no puedo pensar en muchas opciones aparte de las que sugiere (atravesar todo el DOM, observar las posiciones y tamaños de los elementos y ver si alguno de ellos encapsula 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 5

document.elementFromPoint(x,y)

Documentado here para Firefox 3 y aquí para IE, pero vea el modo quirksmode para las diferencias entre navegadores.