Javascript 如何获取位于页面中给定位置的DOM元素列表

可能重复：

---

我想找出位于鼠标单击位置的所有DOM元素的列表。我需要使用javascript或jquery来实现这一点。有人能建议我怎么做吗？

我会使用jQuery来做这件事，从单击的元素开始，得到所有单击元素的列表。单击鼠标将处理程序添加到文档：

$( 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();
}

选中此选项-
单击“世界”一词，查看它的作用

这也适用于

绝对

定位元素

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

---

您无法使用javascript模拟鼠标按坐标位置单击（想想这会是什么样的安全问题！），因此我认为您无法完成希望完成的任务。此外，没有编程方法可以查看页面上任意x/y位置可能存在哪些层。如果你只是想调试一些东西，并且想在页面上某个x，y位置看到所有东西，那么当你查看完Firebug或Chrome inspector中的每个元素后，只需删除它，然后使用inspector查看它下面的内容

如果你真的需要一个工具来做你想要的，你可以使用jquery和浏览器插件的组合。您可以编写一个Chrome或Firefox扩展，用event.x和event.y坐标模拟真实的鼠标点击。然后可以使用前面提到的捕获单击元素的所有父元素的建议。对这些元素进行编目后，找到单击项的最顶端父项，克隆它，删除除最顶端父项本身之外的所有克隆元素，并将该最顶端父项的背景设置为透明。现在用这个透明的克隆元素替换DOM中的原始元素。这样，您就保留了页面的布局，当您模拟另一次单击时，您实际上是在“通过”最顶部的元素（透明）并单击它后面的下一个DOM元素（如果有）。重复上述过程，直到到达body标签。最后，您将有一个特定x，y位置的所有DOM元素的完整列表。

这就完成了任务（）：

$（文档）。单击（函数（e）{
var hitElements=getHitElements（e）；
});
var getHitElements=函数（e）{
var x=e.pageX；
var y=e.pageY；
var hitElements=[]；
$（':visible'）。每个（函数（）{
var offset=$（this.offset（）；
如果（offset.leftx）和（offset.topy）））{
hitElements.push（$（this））；
}
});
返回元素；
}​

使用

：visible

时，应注意以下几点：

可见性为“隐藏”或不透明度为“0”的图元视为可见， 因为它们仍然会占用布局中的空间。在动画中 隐藏图元时，该图元将被视为在结束前可见 这是动画的一部分。在显示元素的动画过程中，该元素是 视为在动画开始时可见

---

因此，根据您的需要，您可能希望排除

可见性：隐藏
和
不透明度：0
元素。
虽然我同意这可以工作，但它可能无法检索所有非静态定位元素。我同意ianpgall。该位置上的元素基于z索引排列在同一位置，并且也是非静态定位的。我怎样才能找回它们？很公平。我不知道怎样才能把它们都弄到手……我看到elem3在elem2之上。当我点击elem3时，我得到以下作为输出~~~DIV elem3 BODY HTML~~~我不认识elem3下的elem2，输出不应该是~~~DIV elem3 DIV elem2 BODY HTML~~~看看。这不是一个完全重复的问题。我认为，与另一个答案的联系并不是对上述问题的完整回答。不能将页面上最前面的元素设置为“display:none”，并期望页面上所有剩余元素的位置保持不变。事实上，删除div可能会导致页面布局完全改变。那么，该方法将如何允许用户捕获页面上某对坐标处可能存在的所有层呢？谢谢Luca，让我尝试一下，然后返回。接近我要找的。不客气。用小提琴试一试：
$(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;
}​