Getting DIV id based on x & y position

Question

The problem I\'m trying to solve is \"What\'s at this position?\"

It\'s fairly trivial to get the x/y position (offset) of a DIV, but what about the reverse? How do

Answer 1

function getDivByXY(x,y) {
   var alldivs = document.getElementsByTagName('div');

   for(var d = 0; d < alldivs.length; d++) {
      if((alldivs[d].offsetLeft == x) && (alldivs[d].offsetTop == y)) {
         return alldivs[d];
      }
   }

   return false;
}

Answer 2

Create a mouse event listener, then trigger a mouse event at that location. This should give you the entire stack of elements at that location.

Or, look at the source of Firebug.

Answer 3

If all you have is the X and Y position, (and you can't track mouse movement like you mentioned) then you will have to traverse the DOM, looping through every DIV. For each DIV you will need to compare its X and Y coordinates against those you have. This is an expensive operation, but it is the only way. I suggest you might be better off rethinking your problem instead of coming up with a solution for it.

Answer 4

this might be a little too processor intensive but going over the whole list of div elements on a page, finding their positions and sizes then testing if they're under the mouse. i don't think i'd want to do that to a browser though.

Answer 5

One option is to build an array of "div-dimension" objects. (Not to be confused with the divs themselves... IE7 perf is frustrating when you read dimensions off of object.)

These objects consist of a pointer to the div, their dimensions (four points... say top, left, bottom, and right), and possibly a dirty bit. (Dirty bit is only really needed if the sizes change.

You could then iterate through the array and check dimensions. It requires O(n) to do that on each mouse move. You might be able to do slightly better with a binary search style approach... maybe.

If you do a binary search style approach, one way is to store 4 arrays. Each with a single point of the dimension, and then binary search on all four. O(4logn) = O(logn).

I'm not saying I recommend any of these, but they MIGHT work.

Answer 6

I think what John is saying is that you can use document.createEvent() to simulate a mousemove at the location you want. If you capture that event, by adding an eventlistener to the body, you can look at the event.target and see what element was at that position. I'm unsure as to what degree IE supports this method, maybe someone else knows?

http://developer.mozilla.org/en/DOM/document.createEvent

Update: Here's a jquery plugin that simulates events:

http://jquery-ui.googlecode.com/svn/trunk/tests/simulate/jquery.simulate.js