How do I find the DOM node that is at a given (X,Y) position? (Hit test)
I have the coordinates (X,Y) of a point in an HTML document. How do I determine what DOM node is at those coordinates?
Some ideas:
- Is there a DOM hit test function that I missed, that takes a point (X,Y) and returns the DOM element there?
- Is there an efficient way to walk the DOM element tree to find the containing element? This seems like it would be tricky because of absolutely positioned elements.
- Is there a way to simulate an event at a given (X,Y) position such that the browser ends up creating an event object that has a pointer to the element?
(Background: I'm embedding Qt's QWebView in a native application. I'm trying to vary the context menu that the Qt widget provides based on the DOM node that the mouse is over, but Qt 4.5 cannot hit test to a DOM element, though that functionality is coming in 4.6. So I'm hoping I can toss the the coordinate into Javascript and do the hit testing there with DOM APIs.)
Thanks!
Answer
As long as your users aren't using old versions of Safari, Chrome or Opera, you're in luck: use document.elementFromPoint(x, y) (MSDN ref, Mozilla ref, QuirksMode article):
Returns the element from the document ... which is the topmost element which lies under the given point.
If you need to support older browsers, I can't think of many options other than what you suggest (traverse the entire DOM, looking at element positions and sizes and seeing if any of them encapsulate your (x, y)).
I don't think the event simulation will work but it is an interesting idea. My understanding of event dispatching is you specify the target that the event is for, which is precisely what you are trying to find out in the first place.