How do I find the DOM node that is at a given (X,Y) position? (Hit test)

by

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.

More Related Contents:

  1. How do I set/unset a cookie with jQuery?
  2. Executing elements inserted with .innerHTML
  3. How to stop event propagation with inline onclick attribute?
  4. Difference between innerText, innerHTML and value?
  5. getElementsByTagName() equivalent for textNodes
  6. document.createElement(“script”) synchronously
  7. Firing event on DOM attribute change
  8. How to expose IFrame’s DOM using jQuery?
  9. How can I simulate a click to an anchor tag?
  10. How To Wrap / Surround Highlighted Text With An Element
  11. Finding line-wraps
  12. Get child node index
  13. Getting value of HTML Checkbox from onclick/onchange events
  14. Check if option is selected with jQuery, if not select a default
  15. Select all elements with a “data-xxx” attribute without using jQuery
  16. DOM refresh on long running function
  17. Finding DOM node index
  18. jQuery events .load(), .ready(), .unload()
  19. change html text from link with jquery
  20. Wait for iframe to load in JavaScript
  21. Why does getElementById not work on elements inside the document element? [duplicate]
  22. Add a link stylesheet dynamically in the [closed]
  23. How to inherit from the DOM element class
  24. IE’s document.selection.createRange doesn’t include leading or trailing blank lines
  25. DOM Mutation event in JQuery or vanilla Javascript
  26. Trying to set a span element equal to a variable value in a JS Rock, Paper, Scissors Game
  27. Javascript: Let user select an HTML element like Firebug?
  28. How to JSON.stringify a dom element?
  29. How to properly unload/destroy a VIDEO element
  30. Adding Event Listeners on Elements – Javascript

Leave a Comment