Как найти DOM node, который находится в заданной (X, Y) позиции? (Хит-тест)

У меня есть координаты (X, Y) точки в документе HTML. Как определить, что DOM node находится в этих координатах?

Некоторые идеи:

Есть ли функция проверки удаленных данных DOM, которую я пропустил, которая принимает точку (X, Y) и возвращает туда элемент DOM?
Существует ли эффективный способ перемещения дерева элементов DOM для поиска содержащего элемент? Кажется, что это было бы сложно из-за абсолютно позиционированных элементов.
Есть ли способ имитировать событие в заданной (X, Y) позиции, так что браузер заканчивает создание объекта события, у которого есть указатель на элемент?

(Фон: я вставляю Qt QWebView в собственное приложение. Я пытаюсь изменить контекстное меню, которое Qt-виджет предоставляет на основе DOM node, что мышь закончилась, но Qt 4.5 не может ударить тест к элементу DOM, хотя эта функциональность входит в 4.6. Поэтому я надеюсь, что смогу поднять координату в Javascript и провести там тестирование с DOM-API.)

Спасибо!

Ответ 1

Пока ваши пользователи не используют старые версии Safari, Chrome или Opera, вам повезло: используйте document.elementFromPoint(x, y) (MSDN ref, Mozilla ref, статья QuirksMode):

Возвращает элемент из документа... который является самым верхним элементом, который лежит в данной точке.

Если вам нужна поддержка старых браузеров, я не могу придумать множество опций, отличных от того, что вы предлагаете (перемещайте весь DOM, глядя на позиции и размеры элементов и видя, если какой-либо из них инкапсулирует ваши (x, y)),.

Я не думаю, что симуляция событий будет работать, но это интересная идея. Мое понимание диспетчеризации событий - это указать цель, для которой предназначено событие, что именно вы пытаетесь выяснить в первую очередь.

Ответ 2

В IE существует document.body.componentFromPoint(x,y). Я не знаю, есть ли реализация перекрестного браузера.

Ответ 3

Это, вероятно, не лучшее решение, но вы можете пересечь дом-дерево, начиная с поиска координат узлов-предков, которые содержат ваши позиции x и y, и быстро добраться до листа node, который содержит ваши координаты. Для получения позиций node в кросс-браузере вы можете посмотреть набор инструментов JS. Я использовал dojo. Взгляните на dojo._ getMarginBox здесь

Ответ 4

document.elementFromPoint(x,y)

Документировано здесь для Firefox 3 и здесь для IE, но см. quirksmode для различий между браузерами.

Ответ 5

Для этого вы можете использовать jQuery. Я бы привязал все необходимые элементы dom к событию click, это даст мне соответствующий объект dom при щелчке, а также положение мыши.