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

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

Gdyby tylko były document.elementsFromPoint- gdyby elementy się nakładały.

— Seiyria

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

document.elementsFromPointjest dostępny w najnowszych przeglądarkach obsługujących Webkit i Gecko, aczkolwiek eksperymentalny. Zobacz MDN .

— zopieux

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