Al hacer clic en el usuario Me gustaría obtener una lista de todos los elementos que residen en el punto cliqueado.¿Cómo obtener una lista de todos los elementos que residen en el punto cliqueado?
Por ejemplo, si el usuario hace clic en Hello aquí:
<div><span>Hello<span></div>
me gustaría obtener la lista siguiente:
<span> elemento<div> elemento<body> elemento<html> elemento¿Cuál sería el método más fácil de obtener estos elementos?
EDIT: Según la aclaración, creo que esto es lo que quiere decir:
EDIT: Como ha señalado @Misha, outerWidth() y outerHeight() deben utilizarse en lugar de width() y height() con el fin de obtener una precisa range.
Además, si no hay nada para evitar la propagación de eventos en la página, a continuación, el click se debe colocar en la document, ya que será mucho más eficiente. Incluso si algún otro controlador click evita el burbujeo, igual debería tener el click en el document, y simplemente manejarlo por separado del controlador que evita el burbujeo.
Ejemplo: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;
});
Respuesta original:
Esto le dará una matriz de los nombres de las etiquetas, incluyendo el lapso. No pude decir si esto es lo que quería.
Se utiliza junto con .parents().andSelf() para obtener los elementos, a continuación, utiliza .map() con .get() para crear la matriz.
Ejemplo:http://jsfiddle.net/9cFTG/
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});
si sólo quería los elementos, no los nombres de las etiquetas, deshacerse de .map() y .get().
O si quería unirse a la matriz en una cadena utilizando algún tipo de separador, sólo tiene que añadir .join(" ") después .get(), colocando el separador dentro de las comillas.
La función jQuery parents() puede hacer esto por usted.
Para adjuntar un evento de clic a todos los span etiquetas, por ejemplo: método parent
$("span").click(function() {
var parents = "";
$(this).parents().map(function() {
parents = parents + " " + this.tagName;
})
alert(parents);
});
No estoy buscando padres. Por favor vea mis comentarios y el contraejemplo anterior. –
uso para obtener padre de la etiqueta actual de forma recursiva o en el ciclo:
var parentTag = $(this).parent().get(0).tagName;
Pruebe algo como esto
$('span').click(function() {
var parents = $(this).parents();
for(var i = 0; i < parents.length; i++){
console.log($(parents[i]).get(0).tagName)
}
});
verificación de la demostración en vivo
En el futuro cercano esto debería ser posible:
$(document).click(function(e) {
var family = this.elementsFromPoint(e.pageX, e.pageY);
$(family).each(function() {
console.log(child);
});
});
Marcado como aún no implementado ampliamente, pero funciona con Chrome 53 (10/1/2016). – user35443
Definitivamente algunas, está marcado como "tecnología experimental", totalmente compatible con Chrome 43+, Firefox 46+, experimental en IE, desconocido en Opera y no compatible con Safari. – user35443
He actualizado la demo http://jsfiddle.net/57bVR/3/, añadiendo al código de la lógica para gestionar también (si está presente):
$(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;
});
aplicación Sólo javascript:
window.addEventListener('click', function(e){
console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)
Trabajado para mí en Firefox y cromo como de 3-29-2017
encontrado esto: https://gist.github.com/osartun/4154204
tuvo que cambiar elements.get (i) a los elementos de [i] para arreglarlo ...
No estoy buscando padres. Mira aquí: http://jsfiddle.net/9cFTG/1/ '.a' y' .b' no son padres, pero si el usuario hace clic en la intersección, ¡me gustaría tenerlos a ambos! (lo siento, corrigió el enlace) –
@Misha - Entonces, ¿qué está buscando es una lista de todos los elementos que se colocan a través de CSS en el punto en la pantalla donde se realizó el clic? Parece que necesitaría recorrer * cada * elemento en la página y obtener su posición y tamaño, y compararlo con la posición de clic. ¿Estás seguro de que eso es lo que quieres? ¿O puedes limitarlo a ciertas clases de elementos? – user113716
Quiero que el usuario cambie los colores de los elementos en la página. Cuando hace clic en algún elemento, en caso de ambigüedad, debería poder elegir a qué elemento se refería. –