Jak mogę uzyskać listę elementów DOM, które znajdują się na danej pozycji na stronie

Question

Powiel możliwe:
Locating DOM element by absolute coordinates

Chcę dowiedzieć się wykaz wszystkich Elementy DOM, które znajdują się w miejscu kliknięcia myszą. Wymagam tego przy pomocy javascript lub jquery. Czy ktoś mógłby mi zasugerować, w jaki sposób mogę to zrobić?

Answer 1

Do tego celu użyję jQuery, zaczynając od klikniętego elementu i otrzymując listę wszystkich klikniętych elementów. Dodaj do obsługi dokumentu na jednym kliknięciem myszy:

$(document).click(function(event) { 
    // event.currentTarget is the clicked element 
    // this is a list of all the parents of the clicked element 
    $(event.currentTarget).parents(); 
} 

Answer 2

Sprawdź to - http://jsfiddle.net/blackpla9ue/U2RCE/5/
Kliknij na słowo „światowym”, aby zobaczyć go w akcji.

Działa również w pozycjonowanych elementach.

$('*').click(function(event){ 
    console.log($(this)[0].tagName + ' ' + $(this)[0].className); 
});​ 

Answer 3

Nie można zasymulować kliknięcie myszą przez położenie współrzędnych przy użyciu javascript (myślę o tym, co stanowi potencjalne zagrożenie, że będzie!), Więc nie sądzę, można osiągnąć to, czego szukasz zrobić. Co więcej, nie ma programowego sposobu sprawdzania, jakie warstwy mogą istnieć w dowolnej pozycji x/y na stronie. Jeśli próbujesz tylko coś debugować i chcesz zobaczyć wszystko na określonej pozycji x, y na stronie, po prostu usuń każdy element w Firebug lub inspektorze Chrome, gdy skończysz je przeglądać i użyj inspektora, aby zobaczyć, co jest pod spodem to.

Jeśli naprawdę potrzebujesz narzędzia, które robi to, co chcesz, możesz użyć kombinacji jquery i dodatku przeglądarki. Możesz napisać rozszerzenie przeglądarki Chrome lub Firefox, które symuluje kliknięcie myszą z współrzędnymi event.x i event.y. Następnie można użyć wyżej wspomnianej sugestii przechwytywania wszystkich rodziców klikniętego elementu. Po wpisaniu do katalogu tych elementów znajdź najwyższy element nadrzędny klikniętego elementu, sklonuj go, usuń wszystkie elementy klonu oprócz najwyższego rodzica jako takiego i ustaw dla niego najbardziej przejrzyste tło rodzica. Teraz zastąp oryginalny element w DOM tym przezroczystym sklonowanym elementem. W ten sposób zachowujesz układ strony, a kiedy zasymulujesz kolejne kliknięcie, klikniesz "przechodząc" do najwyższego elementu (który jest przezroczysty) i klikając następny element DOM (jeśli jest) za nim. Powtórz powyższy proces, aż dotrzesz do znacznika body. Na końcu będziesz mieć pełną listę wszystkich elementów DOM w określonej lokalizacji x, y.

Answer 4

ta spełnia swoje zadanie (fiddle):

$(document).click(function(e) { 
    var hitElements = getHitElements(e); 
}); 

var getHitElements = function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var hitElements = []; 

    $(':visible').each(function() { 
     var offset = $(this).offset(); 
     if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) { 
      hitElements.push($(this)); 
     } 
    }); 

    return hitElements; 
}​ 

Podczas korzystania :visible, należy zdawać sobie sprawę z tego:

Elementy z widoczność: ukryte lub krycie: 0 są uważane widoczna, ponieważ nadal zajmują miejsce w układzie. Podczas animacji, które ukrywają element, element jest uważany za widoczny do końca animacji. Podczas animacji, aby pokazać element, element jest uważany za widoczny na początku animacji.

Tak więc, w zależności od potrzeb, należy wykluczyć elementy visibility:hidden i opacity:0.