Pobierz element na określonej pozycji - JavaScript

135

Używając JavaScript, jak mogę zidentyfikować element na określonej pozycji? Zasadniczo chcę napisać funkcję, która przyjmuje dwa parametry wejściowe (współrzędne xiy) i zwraca element HTML w pozycji na ekranie reprezentowanej przez parametry.

javascript html dom kjv
źródło
3
elementsFromPoint
Janus Troelsen

Odpowiedzi:

246 
document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

rahul
źródło
23
Gdyby tylko były document.elementsFromPoint- gdyby elementy się nakładały.
Seiyria
2
Jestem zdumiony, że to działało w ie 5.5 i nie jest dziś tak często używane.
Vlad Nicula,
Wypróbowałem tę metodę i mierzy pozycję zgodnie z dokumentem. Jak używać go względem elementu nadrzędnego?
Charas,
Jeśli na współrzędnych x, y znajduje się ramka lub ramka iframe, otrzymasz ramkę, a nie element w tym miejscu.
Elmue
13
document.elementsFromPointjest dostępny w najnowszych przeglądarkach obsługujących Webkit i Gecko, aczkolwiek eksperymentalny. Zobacz MDN .
zopieux
27

Możesz użyć natywnej elementFromPoint(x, y)metody JavaScript , która zwraca element o współrzędnych x, y w rzutni.

Zobacz wersję roboczą elementuFromPoint w3c

I przykładowy kod:

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}
<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>
Rozwiń fragment

Możesz użyć setInterval()do ciągłego sprawdzania zdarzenia najechania na element, ale nie jest to zalecane, spróbuj .hover(...)zamiast tego użyć i css, aby zwiększyć wydajność aplikacji.

Andrés Morales
źródło