Czy istnieje sposób na znalezienie nazwy div na podstawie lokalizacji (kable x, y)?

Question

Jest dość łatwo znaleźć położenie div, gdy znasz nazwę div. Ale czy istnieje prosty sposób na uzyskanie identyfikatora div, gdy wszystko, co wiem, to kable X/Y ekranu?

Nie będzie nakładających się elementów div w zakresie elementów div o nazwie "# Items1" do "# Items50" na tablicy (inny element div) o nazwie #HarbourRadar. Każdy element div #Items może zawierać więcej niż jeden obraz w stosie.

W każdym razie wszelkie sugestie, jak znaleźć div z lokalizacji będą bardzo mile widziane.

Poniższy kod (zaczerpnięty z poniższej odpowiedzi po tej stronie) otrzymuje identyfikator div #HarbourRadar, który jest częściowo poprawny, ponieważ div #marker jest warstwą ontop, ale nie zwraca div #marker który jest wybrany - tj. o wyższym indeksie Z.

var pos = $("#marker").position(); 
alert(document.elementFromPoint(pos.left, pos.top).id); 

Answer 1

Tak, jest to możliwe przy użyciu metody document.elementFromPoint.
Tak to jest dokumentowane przez Microsoft. Oto Mozilla documentation.
Ta funkcja jest niemal w pełni zgodna, co widać w artykule this browser comparison.

Oto przykładowy kod z Docs MDN:

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>

Answer 2

przyjrzeć się tej istniejącej StackOverflow rozmowy może się okazać, że to pomaga:

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

ten używa funkcji javascript document.elementFromPoint i ma świetny demo, które pokazuje działający przykład.

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

Kod z skrzypce:

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

    alert(elementMouseIsOver); 
});