Po kliknięciu użytkownika Chciałbym uzyskać listę wszystkich elementów, które znajdują się pod w klikniętym punkcie.Jak uzyskać listę wszystkich elementów znajdujących się w miejscu kliknięcia?
Na przykład, jeśli użytkownik kliknie Hello tutaj:
<div><span>Hello<span></div>
chciałbym uzyskać następującą listę:
<span> elementu<div> elementem<body> elementem<html> elementJaka byłaby najłatwiejsza metoda uzyskania tych elementów?
EDIT: Na podstawie wyjaśnienia, myślę, że to właśnie masz na myśli:
EDIT: Jak podkreślił @Misha, outerWidth() i outerHeight() powinny być stosowane w zastępstwie width() i height() w celu uzyskania dokładnego range.
Ponadto, jeśli nie ma nic, aby zapobiec zdarzenie propagacji na stronie, a następnie click powinny być umieszczone na document jak to będzie znacznie bardziej wydajne. Nawet jeśli jakaś inna obsługa click zapobiega propagacji, nadal powinieneś mieć click na document i poradzić sobie z tym oddzielnie od tych procedur obsługi, które zapobiegają bulgotaniu.
Przykład:http://jsfiddle.net/57bVR/3/
$(document).click(function(e) {
var clickX = e.pageX
,clickY = e.pageY
,list
,$list
,offset
,range
,$body = $('body').parents().andSelf();
$list = $('body *').filter(function() {
offset = $(this).offset();
range = {
x: [ offset.left,
offset.left + $(this).outerWidth() ],
y: [ offset.top,
offset.top + $(this).outerHeight() ]
};
return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])
});
$list = $list.add($body);
list = $list.map(function() {
return this.nodeName + ' ' + this.className
}).get();
alert(list);
return false;
});
Oryginalny odpowiedź:
To daje tablicę nazw znaczników w tym przedziale. Nie mogłem powiedzieć, czy tego właśnie chcesz.
Używa wraz z .andSelf(), aby pobrać elementy, a następnie używa .map() z .get() do utworzenia tablicy.
Przykład:http://jsfiddle.net/9cFTG/
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});
Jeśli tylko chciał elementy, a nie nazw znaczników, pozbyć .map() i .get().
Jeśli chcesz dołączyć do tablicy za pomocą separatora, po prostu dodaj .join(" ") po .get(), umieszczając swój separator wewnątrz cudzysłowu.
Funkcja jQuery parents() może zrobić to za Ciebie.
Aby dołączyć zdarzenie click dla wszystkich span tagami, na przykład: metoda dominującej
$("span").click(function() {
var parents = "";
$(this).parents().map(function() {
parents = parents + " " + this.tagName;
})
alert(parents);
});
Nie szukam rodziców. Proszę zobaczyć moje komentarze i kontrprzykład powyżej. –
użyć, aby uzyskać rodzica aktualnego tagu rekurencyjnie lub w cyklu:
var parentTag = $(this).parent().get(0).tagName;
Spróbuj coś jak tej kontroli
$('span').click(function() {
var parents = $(this).parents();
for(var i = 0; i < parents.length; i++){
console.log($(parents[i]).get(0).tagName)
}
});
live demo
w najbliższej przyszłościto powinno być możliwe:
$(document).click(function(e) {
var family = this.elementsFromPoint(e.pageX, e.pageY);
$(family).each(function() {
console.log(child);
});
});
Oznaczono jako jeszcze nie w pełni zaimplementowany, ale działa z Chrome 53 (10/1/2016). – user35443
Zdecydowanie kilka, jest oznaczona jako "technologia eksperymentalna", w pełni obsługiwana w przeglądarce Chrome 43+, Firefox 46+, eksperymentalna na IE, nieznana w Operze i nieobsługiwana przez Safari. – user35443
I zostały zaktualizowane demo http://jsfiddle.net/57bVR/3/, dodając do kodu logiki zarządzać również (jeśli występuje):
$(document).click(function (e) {
var htmlZoom = window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('zoom');
var clickX = e.pageX,
clickY = e.pageY,
list,
$list,
offset,
range,
$body = $('body').parents().andSelf();
$list = $('body *').filter(function() {
offset = $(this).offset();
marginLeft = offset.left * htmlZoom - $(document).scrollLeft();
marginTop = offset.top * htmlZoom - $(document).scrollTop();
outerWidth = $(this).outerWidth() * htmlZoom;
outerHeight = $(this).outerHeight() * htmlZoom;
range = {
x : [marginLeft,
marginLeft + outerWidth],
y : [marginTop,
marginTop + outerHeight]
};
return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])
});
$list = $list.add($body);
list = $list.map(function() {
return this.nodeName + ' ' + this.className
}).get();
alert(list);
return false;
});
Wystarczy javascript realizacji:
window.addEventListener('click', function(e){
console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)
Obrobione mi Firefox i chromu od 3-29-2017
Znaleziono następująco: https://gist.github.com/osartun/4154204
należało zmienić elements.get (I) z elementami [j] naprawić ...
Nie szukam rodziców. Spójrz tutaj: http://jsfiddle.net/9cFTG/1/ '.a' i' .b' nie są rodzicami, ale jeśli użytkownik kliknie na skrzyżowaniu, chciałbym mieć je oba! (przepraszam, poprawiono link) –
@Misha - A więc czego szukasz, to lista wszystkich elementów, które są pozycjonowane za pomocą CSS w punkcie na ekranie, na którym nastąpiło kliknięcie? Wygląda na to, że musisz przejść przez * każdy * element na stronie i uzyskać jego pozycję i rozmiar oraz porównać go z pozycją kliknięcia. Jesteś pewien, że tego chcesz? Czy możesz ograniczyć to do pewnych klas elementów? – user113716
Chcę pozwolić użytkownikowi na zmianę kolorów elementów na stronie. Kiedy kliknie jakiś element, w przypadku niejasności powinien być w stanie wybrać, który element miał na myśli. –