Getting DIV ID Based on x & y Position

Question

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

It's pretty trivial to get the x / y position (offset) of the DIV, but what about the opposite? How to get the identifier of the DIV (or any element) specified by the x / y position?

Answer 1

Unfortunately, triggering a processed / simulated mouse event will not work, since when you send it, you need to provide the target element. Since this element is the one you are trying to figure out, all you could do was send it to the body as if it was already starting to bubble.

You really need to do this yourself, it’s to manually go through the elements you are interested in and compare their position / size / zIndex with the point x / y and see if they overlap. With the exception of IE and more recently FF3, where you can use

var el = document.elementFromPoint(x, y); 

Cm

http://developer.mozilla.org/En/DOM:document.elementFromPoint

http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx

Answer 2

Create a mouse event listener, then trigger a mouse event at that location. This should provide you with the entire stack of elements in this place.

Or look at the source of Firebug.

Answer 3

If all you have is the X and Y position (and you cannot track the mouse movement as you mentioned), you will have to cross the DOM, making your way through each DIV. For each DIV, you need to compare its X and Y coordinates with the ones you have. This is an expensive operation, but it is the only way. I suggest you better rethink your problem, instead of coming up with a solution for it.

Answer 4

 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 5

Use a jQuery selector to filter the list of all divs to match your position criteria?

Answer 6

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

These objects consist of a pointer to a div, their sizes (four dots ... say top, left, bottom and right) and possibly a dirty bit. (A dirty bit is needed only when resizing.

Then you can iterate over the array and check the sizes. This requires O (n) to do this every time you move the mouse. Perhaps you can improve the approach using binary search a bit ... maybe.

If you apply the binary search style, one way is to save 4 arrays. Each of them has one measurement point, and then a binary search on all four. O (4logn) = O (logn).

I'm not saying that I recommend any of them, but they CAN work.

Answer 7

I think John says that you can use document.createEvent () to mock mousemove in the right place. If you captured this event by adding an eventlistener to the body, you can look at event.target and see what element was in that position. I'm not sure how much IE supports this method, maybe someone else knows?

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

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

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

Answer 8

The jQuery selector is very useful, but (if I haven't missed something in the docs), there really aren't any selectors to do this. I can’t filter by other criteria, because all I have to work with is position x and y.

Answer 9

this may be too intense with the processor, but iterates over the entire list of div elements on the page, finding their positions and sizes, and then tests to see if they are under the arm. I don’t think I would like to do this in a browser though.

Answer 10

Thanks MattMitchell. I wish everything was so simple - I already know how to get a DIV position - it's a little more complicated.

Nick and John - Sorry, I can't use mouse position.

I think the solution involves creating some logic that takes a position, does some math, and outputs a DIV identifier. There seems to be no easy answer.

Answer 11

You may find it more efficient to access the DOM tree once, when the page is loaded, get all the positions and sizes of the elements and save them in an array / hash / etc. If you are good at structuring the data structure, you should be able to quickly find the element in the given coordinates when you need it later.

Consider how often you will need to detect an element and compare it with how often the elements on the page change. You will balance the number of times you need to recalculate all the locations of the elements (costly calculation) versus the number of times you actually use the calculated information (relatively cheap, hopefully).