在用户点击时，我想获得位于点击点的所有元素的列表。
例如，如果用户点击Hello：
<div><span>Hello<span></div>
我想得到以下列表：
<span>元素<div>元素<body>元素<html>元素获得这些元素最简单的方法是什么？
编辑：根据澄清，我认为这是你的意思：
编辑：正如@Misha指出的那样，outerWidth()和outerHeight()应该用来代替width()和height()以获得准确的range。
此外，如果没有什么可以阻止页面上的事件冒泡，那么click应该放在document上，因为它会更有效率。即使其他一些click处理程序阻止了冒泡，你仍然应该在click上有document，并且只是将它与那些阻止冒泡的处理程序分开处理。
示例：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;
});
原始答案：
这将为您提供包含范围的标签名称数组。无法确定这是否是你想要的。
它使用.parents()和.andSelf()来获取元素，然后使用.map()和.get()来创建数组。
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});
如果你只是想要元素，而不是标签名称，摆脱.map()和.get()。
或者，如果您想使用某种分隔符将Array加入String，只需在.join(" ")之后添加.get()，将分隔符放在引号内。
在不久的将来，这应该是可能的：
$(document).click(function(e) {
var family = this.elementsFromPoint(e.pageX, e.pageY);
$(family).each( function () {
console.log(child);
});
});
更新2019年 目前在编辑草稿中： Elements from point
使用parent方法递归或循环获取当前标记的父级：
var parentTag = $(this).parent().get(0).tagName;
jQuery parents()函数可以为您完成此操作。
要将click事件附加到所有span标记，例如：
$("span").click(function() {
var parents = "";
$(this).parents().map(function () {
parents = parents + " " + this.tagName;
})
alert(parents);
});
尝试这样的事情
$('span').click(function() {
var parents = $(this).parents();
for(var i = 0; i < parents.length; i++){
console.log($(parents[i]).get(0).tagName)
}
});
查看现场演示
只是javascript实现：
window.addEventListener('click', function(e){
console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)
截至2017年3月29日，我在firefox和chrome上为我工作过
发现这个：https://gist.github.com/osartun/4154204
不得不改变elements.get（i）到elements [i]来修复它...
我已经更新了演示http://jsfiddle.net/57bVR/3/，在代码中添加了要管理的逻辑（如果存在）：
$(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;
});