如何获取页面上给定位置处的DOM元素列表

Question

可能是重复问题：
通过绝对坐标定位DOM元素

我想找出所有在鼠标点击位置的DOM元素列表。我需要使用JavaScript或jQuery来实现这一点。有人能建议我如何做吗？

- Abishek

---

请查看https://dev59.com/6W445IYBdhLWcg3wl7XW。 - Felix Kling

这不是完全重复的问题。在我看来，与此其他答案的链接并不是对上述问题的完整回答。您不能将页面上最前面的元素设置为“display：none”，并期望页面上所有剩余元素的位置保持不变。实际上，移除一个 div 可能会完全改变页面的布局。那么，这种方法如何允许用户捕获页面上某个坐标处可能存在的所有图层呢？ - Ringo

Answer 1

我会使用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();
}

- pwp2

---

虽然我同意这种方法可以起作用，但它可能无法检索所有非静态定位的元素。 - Ian

我同意ianpgall的观点。在该位置上有基于z-index和非静态定位排列在同一位置的元素。我该如何检索它们？ - Abishek

好的，我不知道如何获取它们全部... - pwp2

Answer 2

这是完成工作的方法（fiddle）：

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

在使用:visible时，您应该注意以下内容：

具有visibility: hidden或opacity: 0的元素被认为是可见的，因为它们仍然占据布局中的空间。在隐藏元素的动画期间，该元素被认为是可见的，直到动画结束。在显示元素的动画期间，该元素在动画开始时被认为是可见的。

因此，根据您的需求，您需要排除visibility:hidden和opacity:0元素。

- Luca Fagioli

---

谢谢Luca，让我试试这个然后再回来。接近我想要的东西。 - Abishek

欢迎使用。请在fiddle上尝试：http://jsfiddle.net/U2RCE/12/ - Luca Fagioli

Answer 3

请看 - http://jsfiddle.net/blackpla9ue/U2RCE/5/
点击单词'world'以查看它的作用。

这个方法同样适用于absolute定位的元素。

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

- Malitta N

---

我看到elem3在elem2的上面。当我点击elem3时，输出如下：DIV elem3 BODY HTML我没有识别出elem3下面的elem2。 输出不应该是这样的吗？DIV elem3 DIV elem2 BODY HTML - Abishek

Answer 4

使用JavaScript无法通过坐标位置模拟鼠标单击（想想这将是多么大的安全问题！），因此我认为您无法实现您要做的事情。此外，没有编程方式可以查看页面上任意x/y位置可能存在的图层。如果您只是想调试某些内容并想在页面上特定的x、y位置查看所有内容，请在完成查看后删除Firebug或Chrome检查器中的每个元素，并使用检查器查看其下方的内容。

如果您确实需要一个能够满足您需求的工具，您可以使用jquery和浏览器插件的组合。您可以编写一个Chrome或Firefox扩展程序，使用event.x和event.y坐标模拟真实的鼠标点击。然后，您可以使用上述建议捕获所点击元素的所有父元素。一旦您记录了这些元素，找到所点击项目的最顶级父元素，克隆它，删除克隆元素中除最顶级父元素本身外的所有元素，并将此最顶级父元素的背景设置为透明。现在，在DOM中用透明的克隆元素替换原始元素。通过这种方式，您保留了页面的布局，当您模拟另一个点击时，实际上是通过“透明”的最顶级元素进行点击，同时点击它后面的下一个DOM元素（如果有）。重复以上过程，直到达到body标记。最终，您将得到特定x、y位置的所有DOM元素的完整列表。

- Ringo