Come posso ottenere l'elenco degli elementi DOM che si trovano in una determinata posizione nella pagina

Question

Eventuali duplicati:
Locating DOM element by absolute coordinates

io voglio scoprire l'elenco di tutte le Elementi DOM che si trovano nella posizione in cui si fa clic sul mio mouse. Ho bisogno di farlo usando javascript o jquery. Qualcuno potrebbe suggerirmi su come potrei fare questo?

Answer 1

Vorrei usare jQuery per fare questo, partendo dall'elemento cliccato e ottenendo un elenco di tutti gli elementi cliccati. Aggiungere un gestore per il documento sul clic del mouse:

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

Scegli questa - http://jsfiddle.net/blackpla9ue/U2RCE/5/
Clicca sulla parola 'mondo' per vederlo in azione.

Questo funziona anche negli elementi posizionati absolute.

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

Answer 3

Non si può simulare un clic del mouse in base alla posizione di coordinate utilizzando JavaScript (pensare a ciò che un problema di sicurezza che sarebbe!), Quindi non credo che si può realizzare quello che stai cercando di fare. Inoltre, non esiste un modo programmatico per esaminare quali livelli possono esistere in una posizione x/y arbitraria su una pagina. Se stai solo cercando di eseguire il debug di qualcosa e vuoi vedere tutto in una determinata posizione x, y sulla pagina, elimina ogni elemento in Firebug o Chrome inspector quando hai finito di guardarlo e usa l'ispettore per vedere cosa c'è sotto esso.

Se è davvero necessario uno strumento che faccia ciò che si desidera, è possibile utilizzare una combinazione di jquery e un componente aggiuntivo del browser. Potresti scrivere un'estensione per Chrome o Firefox che simula un vero clic del mouse con le coordinate event.xe event.y. Potresti quindi utilizzare il suggerimento sopra citato di catturare tutti i genitori dell'elemento cliccato. Una volta catalogati questi elementi, trova il genitore più in alto dell'elemento cliccato, clonalo, elimina tutti gli elementi del clone tranne il genitore più in alto e imposta lo sfondo del genitore più in alto in modo che sia trasparente. Ora sostituisci l'elemento originale nel DOM con questo elemento clonato trasparente. In questo modo, si mantiene il layout della pagina e quando si simula un altro clic, si sta effettivamente facendo clic su "attraverso" l'elemento più in alto (che è trasparente) e facendo clic sul successivo elemento DOM (se presente) dietro di esso. Ripeti il ​​processo in alto fino a raggiungere il tag del corpo. Alla fine, avrai un elenco completo di tutti gli elementi DOM in una specifica posizione x, y.

Answer 4

Questo fa il lavoro (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; 
}​ 

Quando si utilizza :visible, si deve essere consapevoli di questo:

Elementi con visibility: hidden o opacità: 0 sono considerati visibile, dal momento che consumano ancora spazio nel layout. Durante le animazioni che nascondono un elemento, , l'elemento è considerato visibile fino alla fine dell'animazione. Durante le animazioni per mostrare un elemento, l'elemento è considerato visibile all'inizio dell'animazione.

Pertanto, in base alle proprie esigenze, si desidera escludere gli elementi visibility:hidden e opacity:0.