Jak znaleźć węzeł DOM w danej pozycji (X, Y)? (Hit test)

Question

Mam współrzędne (X, Y) punktu w dokumencie HTML. Jak ustalić, który węzeł DOM ma współrzędne?

Kilka pomysłów:

• Czy istnieje DOM hit funkcję testową, że brakowało mi, że trwa punkt (x, y) i zwraca element DOM tam?
• Czy istnieje skuteczny sposób na poruszanie się po drzewie elementów DOM w celu znalezienia elementu zawierającego? Wydaje się, że byłoby to trudne ze względu na absolutnie pozycjonowane elementy.
• Czy istnieje sposób symulacji zdarzenia w danej pozycji (X, Y), aby przeglądarka zakończyła tworzenie obiektu zdarzenia, który ma wskaźnik do elementu?

(Tło: Osadzam QWebView Qt w aplikacji natywnej Próbuję zmienić menu kontekstowe, które zapewnia widget Qt na podstawie węzła DOM myszy, ale Qt 4.5 nie może trafić przetestuj element DOM, chociaż ta funkcjonalność jest już dostępna w wersji 4.6. Mam więc nadzieję, że będę mógł wstawić współrzędne do JavaScript i przetestować je za pomocą interfejsów API DOM.)

Dzięki!

Answer 1

Dopóki użytkownicy nie są przy użyciu starych wersji Safari, Chrome lub Opera, masz szczęście: użyj document.elementFromPoint(x, y) (MSDN ref, Mozilla ref, QuirksMode article):

Zwraca element z dokumentu ... który jest najwyższym elementem, który leży pod danym punktem.

Jeśli potrzebujesz wsparcia starszych przeglądarek, nie mogę myśleć o wielu opcji innych niż to, co proponujesz (przemierzać cały DOM, patrząc na pozycjach i wielkości elementu i zobaczyć, czy któryś z nich hermetyzacji swoją (x, y)).

Nie sądzę, że symulacja zdarzenia zadziała, ale jest to ciekawy pomysł. Moje rozumienie wysyłania zdarzeń to określenie celu, na którym odbywa się wydarzenie, dokładnie to, co starasz się dowiedzieć w pierwszej kolejności.

Answer 2

W IE istnieje document.body.componentFromPoint(x,y). Nie wiem, czy istnieje implementacja przeglądarki krzyżowej.

Answer 3

Prawdopodobnie nie jest to najlepsze rozwiązanie, ale możesz przemierzać drzewo domowników zaczynając od znalezienia współrzędnych węzłów przodków, które zawierają twoje pozycje xiy i szybko dostać się do węzła liści zawierającego twoje współrzędne. Aby uzyskać pozycję węzła w trybie przeglądarki, można przejrzeć zestawy narzędzi JS. Jedną z nich, którą używałem, jest dojo. Spójrz na dojo._getMarginBox here

Answer 4

document.elementFromPoint(x,y) 

Udokumentowane here dla Firefoksa 3 i here dla IE, ale zobaczyć quirksmode różnice w różnych przeglądarkach.

Answer 5

Możesz użyć jQuery do tego. Wiązałbym wszystkie potrzebne elementy DOM w zdarzeniu kliknięcia, to da mi odpowiedni obiekt DOM po kliknięciu, a także mouse position.