Wie kann ich die Liste der DOM-Elemente erhalten, die an einer bestimmten Position auf der Seite

Question

Mögliche Duplizieren befinden:
Locating DOM element by absolute coordinates

möchte ich die Liste aller, um herauszufinden, DOM Elemente, die sich an der Position befinden, an der meine Maus geklickt wird. Ich benötige das mit Javascript oder jquery. Könnte mir jemand vorschlagen, wie ich das machen könnte?

Answer 1

Ich würde jQuery dazu verwenden, beginnend mit dem angeklickten Element und eine Liste aller angeklickten Elemente abrufen. Fügen Sie einen Handler auf das Dokument auf der per Mausklick:

$(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

prüfen diese - http://jsfiddle.net/blackpla9ue/U2RCE/5/
Klicken Sie auf das Wort ‚Welt‘ es in Aktion zu sehen.

Dies funktioniert in absolute positioniert Elemente auch.

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

Answer 3

Sie können nicht einen Mausklick von Koordinatenposition mit Hilfe von Javascript (darüber nachdenken, was ein Sicherheitsproblem, das wäre!) Simulieren, so dass ich glaube nicht, dass Sie erreichen können, was Sie suchen zu tun. Außerdem gibt es keinen programmatischen Weg, um zu sehen, welche Ebenen an einer beliebigen x/y-Position auf einer Seite existieren können. Wenn Sie nur versuchen, etwas zu debuggen und alles an einer bestimmten x, y-Position auf der Seite sehen möchten, löschen Sie einfach jedes Element im Firebug- oder Chrome-Inspektor, wenn Sie es sich angeschaut haben und verwenden Sie den Inspektor, um zu sehen, was darunter liegt es.

Wenn Sie wirklich ein Tool brauchen, das das tut, was Sie wollen, können Sie eine Kombination aus jquery und einem Browser-Add-On verwenden. Sie könnten eine Chrome- oder Firefox-Erweiterung schreiben, die mit den Koordinaten event.x und event.y einen echten Mausklick simuliert. Sie könnten dann den oben erwähnten Vorschlag verwenden, alle Eltern des angeklickten Elements zu erfassen. Sobald Sie diese Elemente katalogisiert haben, suchen Sie das oberste übergeordnete Element des angeklickten Elements, klonen Sie es, löschen Sie alle Elemente des Klons mit Ausnahme des obersten übergeordneten Elements selbst und legen Sie den Hintergrund dieses übergeordneten Elements auf transparent fest. Ersetzen Sie nun das ursprüngliche Element im DOM durch dieses transparente geklonte Element. Auf diese Weise behalten Sie das Layout der Seite bei, und wenn Sie einen weiteren Klick simulieren, klicken Sie tatsächlich auf das oberste Element (das transparent ist) und klicken Sie auf das nächste DOM-Element (falls vorhanden) dahinter. Wiederholen Sie den obigen Vorgang, bis Sie das Body-Tag erreichen. Am Ende haben Sie eine vollständige Liste aller DOM-Elemente an einem bestimmten XY-Ort.

Answer 4

Dies macht den Job (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; 
}​ 

Wenn :visible verwenden, sollten Sie sich dessen bewusst sein:

Elemente mit visibility: hidden oder Opazität: 0 sichtbar betrachtet werden, da sie immer noch Platz im Layout verbrauchen. Während Animationen, die ein Element ausblenden, wird das Element als bis zum Ende der Animation sichtbar betrachtet. Während Animationen, um ein Element anzuzeigen, wird das Element als am Anfang bei der Animation sichtbar betrachtet.

Also, basierend auf Ihrem Bedarf möchten Sie die visibility:hidden und opacity:0 Elemente ausschließen.