Sur l'utilisateur cliquez sur Je voudrais obtenir une liste de tous les éléments qui se trouve au point cliqué.Comment obtenir une liste de tous les éléments qui se trouvent au point cliqué?
Par exemple, si l'utilisateur clique sur Hello ici:
<div><span>Hello<span></div>
Je voudrais obtenir la liste suivante:
<span><div> élément<body> élément<html> élémentQuelle serait la méthode la plus simple pour obtenir ces éléments?
EDIT: Sur la base de la clarification, je pense que c'est ce que vous voulez dire:
EDIT: Comme indiqué par @Misha, outerWidth() et outerHeight() doit être utilisé au lieu de width() et height() afin d'obtenir une range précise.
De plus, s'il n'y a rien pour empêcher l'événement bouillonnant sur la page, le click devrait être mis sur le document car il sera beaucoup plus efficace. Même si un autre gestionnaire click empêche le bouillonnement, vous devez toujours avoir le click sur le document, et le manipuler séparément des gestionnaires qui empêchent les bulles.
Exemple: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;
});
réponse originale:
Cela vous donnera un tableau des noms de balises, y compris la portée. Je ne peux pas dire si c'est ce que tu voulais.
Il utilise .parents() avec .andSelf() pour obtenir les éléments, puis utilise .map() avec .get() pour créer le tableau.
Exemple:http://jsfiddle.net/9cFTG/
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});
Si vous vouliez juste les éléments, et non pas les noms de balises, se débarrasser de .map() et .get().
Ou si vous vouliez joindre le tableau dans une chaîne en utilisant une sorte de séparateur, ajoutez simplement .join(" ") après .get(), en plaçant votre séparateur dans les guillemets.
La fonction jQuery parents() peut le faire pour vous.
Pour joindre un événement de clic à tous les span balises, par exemple:
$("span").click(function() {
var parents = "";
$(this).parents().map(function() {
parents = parents + " " + this.tagName;
})
alert(parents);
});
Je ne cherche pas de parents. S'il vous plaît voir mes commentaires et contre-exemple ci-dessus. –
utiliser la méthode parent pour obtenir parent de l'étiquette actuelle récursive ou dans le cycle:
var parentTag = $(this).parent().get(0).tagName;
Essayez quelque chose comme ça
$('span').click(function() {
var parents = $(this).parents();
for(var i = 0; i < parents.length; i++){
console.log($(parents[i]).get(0).tagName)
}
});
vérifier la démo en direct
Dans un proche avenir cela devrait être possible:
$(document).click(function(e) {
var family = this.elementsFromPoint(e.pageX, e.pageY);
$(family).each(function() {
console.log(child);
});
});
Marqué comme pas encore largement implémenté, mais fonctionne avec Chrome 53 (01/10/2016). – user35443
Certainement quelques-uns, il est marqué comme "technologie expérimentale", entièrement pris en charge sur Chrome 43+, Firefox 46+, expérimental sur IE, inconnu sur Opera et non pris en charge par Safari. – user35443
J'ai mis à jour la démo http://jsfiddle.net/57bVR/3/, en ajoutant au code la logique de gérer aussi (le cas échéant):
$(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;
});
mise en œuvre juste javascript:
window.addEventListener('click', function(e){
console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)
travaillé pour moi dans Firefox et Chrome à partir de 3-29-2017
trouvé ceci: https://gist.github.com/osartun/4154204
a dû changer elements.get (i) aux éléments [i] pour le réparer ...
Je ne cherche pas de parents. Regardez ici: http://jsfiddle.net/9cFTG/1/ '.a' et' .b' ne sont pas des parents, mais si l'utilisateur clique sur l'intersection, je voudrais les avoir tous les deux! (désolé, corrigé le lien) –
@Misha - Donc ce que vous cherchez est une liste de tous les éléments qui sont positionnés via CSS au point de l'écran où le clic a eu lieu? Il semblerait que vous auriez besoin de faire défiler * chaque * élément sur la page et d'obtenir sa position et sa taille, et de le comparer à la position du clic. Es-tu sûr que c'est ce que tu veux? Ou pouvez-vous le limiter à certaines classes d'éléments? – user113716
Je veux laisser l'utilisateur changer les couleurs des éléments sur la page. Quand il clique sur un élément, en cas d'ambiguïté, il devrait être capable de choisir quel élément il voulait dire. –