6

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

我想找出位于单击鼠标位置的所有 DOM 元素的列表。我需要使用 javascript 或 jquery 来执行此操作。有人可以建议我如何做到这一点吗？

4

4 回答 4

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();
}
于 2012-10-22T04:59:32.973 回答
1

这可以完成工作（小提琴）：

$(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:hiddenandopacity:0元素。

于 2012-10-22T05:52:32.733 回答
0

您无法使用 javascript 通过坐标位置模拟鼠标点击（想想这将是一个多么安全的问题！），所以我认为您无法完成您想要做的事情。另外，没有编程方式可以查看页面上任意 x/y 位置可能存在哪些图层。如果您只是尝试调试某些内容并希望查看页面上某个 x,y 位置的所有内容，只需在查看完 Firebug 或 Chrome 检查器中的每个元素并使用检查器查看下面的内容即可它。

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

于 2012-10-22T05:32:04.130 回答
0

检查这个 - http://jsfiddle.net/blackpla9ue/U2RCE/5/
点击“世界”这个词来查看它的实际效果。

这也适用于absolute定位元素。

$('*').click(function(event){
    console.log($(this)[0].tagName + ' ' + $(this)[0].className);
});​
于 2012-10-22T05:24:17.153 回答