16

It is fairly easy to find the location of a div, when you know the div name. But is there an easy way to get the div id when all I know is the X/Y cords of the screen?

There will be no overlapping divs within a range of divs named '#Items1' to '#Items50' on a board (another div) called #HarbourRadar. Each div #Items can have more than one stacked image in it.

Anyway any hint to find the div out from a location would be greatly appreciated.

The following code (taken from the answer below on this side) gets the id of the div #HarbourRadar, that is partially right since the div #marker is layered ontop on that one, but does not return the div #marker that is selected - ie one with a higher Z-index. 

var pos = $("#marker").position();
alert(document.elementFromPoint(pos.left, pos.top).id);
Marker
  • 163
  • 5
  • Why do you want to find it by coordinates? How do you get the coordinates? – Lars Nyström Feb 09 '13 at 11:25
  • Not real sure if this would work, but have you tried adding a click handler on the body tag and then checking the 'target' property to see if it gives you the original source? – vansimke Feb 09 '13 at 11:28
  • @Lars, well I am working on a gridbased board, so I know the X,Y cordinates quite well. ie getting the location from a marker would be like this. var pos = $("#marker").position(); alert('X cord:' + pos.posX); – Marker Feb 09 '13 at 11:59
  • possible duplicate of [How do I find the DOM node that is at a given (X,Y) position? (Hit test)](http://stackoverflow.com/questions/1569775/how-do-i-find-the-dom-node-that-is-at-a-given-x-y-position-hit-test) and http://stackoverflow.com/q/48999/218196 and possible also http://stackoverflow.com/q/1471047/218196. – Felix Kling Feb 09 '13 at 12:32

2 Answers2

18

Yeah, it is possible using the document.elementFromPoint method.
This is how it is documented by Microsoft. Here is Mozilla documentation.
The function is almost fully compatible, as you can see in this browser comparison.

Here is some sample code from MDN docs:

function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
Thomas Orlita
  • 1,554
  • 14
  • 28
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • Great answer, I'd never heard of this before :) – Rory McCrossan Feb 09 '13 at 11:28
  • I was wondering too, when I was it first time. But I still doubt about compatibility of this thing. – Tomáš Zato Feb 09 '13 at 11:28
  • Also take a look here http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/ – dfsq Feb 09 '13 at 11:32
  • 1
    @TomášZato me too, that's why I checked: http://www.quirksmode.org/dom/w3c_cssom.html. It has support in everything except old WinSafari and old Opera. – Rory McCrossan Feb 09 '13 at 11:34
  • Also here too, http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html `As a result elementFromPoint() is now truly usable.` – Rory McCrossan Feb 09 '13 at 11:35
  • That is really great and can see it is supported by mobile devices as well. But how do I from there get the ID? ie var pos = $("#marker").position(); alert(document.elementFromPoint(pos.left, pos.top)); returns with "[object HTMLDivElement]" – Marker Feb 09 '13 at 12:29
  • This is because the function returns [Html Element Object](http://www.w3schools.com/jsref/dom_obj_all.asp). One of its properties is `id`. So do `document.elementFromPoint(pos.left, pos.top).id`. But in most cases it is better to use element itself. – Tomáš Zato Feb 09 '13 at 13:59
  • Hi Tomas, yes I found out. But is there a way to literate through all divs at a given location? Could see that document.elementFromPoint(pos.left, pos.top).id actually returns the div ##HarbourRadar, that got the lovest z-index(I forgot that the map was nested in a div too) and not the div with the higest z-index as I would have expected. – Marker Feb 09 '13 at 14:52
2

have a look at this existing StackOverflow conversation you may find this helps:

Determine which element the mouse pointer is on top of in Javascript

This is using a javascript function document.elementFromPoint and has a great demo that shows a working example.

The jsFiddle URL is: http://jsfiddle.net/MPTTp/

Code from the fiddle:

$(window).click(function(e) {
    var x = e.clientX, y = e.clientY,
        elementMouseIsOver = document.elementFromPoint(x, y);

    alert(elementMouseIsOver);
});
Community
  • 1
  • 1
dalethestirling
  • 353
  • 1
  • 8