通过绝对坐标定位DOM元素

Question

有没有一种简单的方法来定位所有覆盖（即在其边界内部）具有X/Y坐标对的像素的DOM元素？

- Dennis Kreminsky

---

你可以从这个问题中得到一个不错的答案：https://dev59.com/F0XRa4cB1Zd3GeqPoxek - Orbling

你的意思是说不止一个元素吗？（你想要计算所有的重叠部分吗？） - gblazex

看看这个解决方案是否对你有帮助：http://jsfiddle.net/eyxt2tt1/2/。该脚本可以检测你的DOM元素是否在一组坐标内。 - GibboK

Answer 1

您可以查看document.elementFromPoint，但我不知道哪些浏览器支持。
Firefox和Chrome都支持。您也可以在MSDN中找到相关文档，但我对这份文档不太熟悉，所以不知道它包含在哪个IE版本中。

更新：

要查找某个位置上的所有元素，您可以假设该位置的父元素中的所有元素都在此位置上。当然，这对于绝对定位的元素是无效的。

elementFromPoint仅会给您最前面的元素。如果想要真正找到其他元素，则需要将最前面元素的display设置为none，然后再次运行该函数。但用户可能会注意到这一过程。您需要尝试。

- Felix Kling

---

@Felix Kling 这听起来是一个可行的方法，我会检查浏览器兼容性。 - Dennis Kreminsky

@etranger - 确定低于3.0版本的FF浏览器不支持该属性。除此之外还算可以：http://www.quirksmode.org/dom/w3c_cssom.html#documentview - gblazex

@galambalazs：哦，它在CSS表格中...我只看了下DOM表格。 - Felix Kling

只有IE 9支持elementFromPoint。 - dawnerd

@dawnerd: 你确定吗？有任何来源吗？http://www.quirksmode.org/dom/w3c_cssom.html#documentview 讲的与你说的不同。 - Felix Kling

哦，奇怪，我看的那个页面说它是IE9的新功能。我想我错了。 - dawnerd

Answer 2

我忍不住要回复Felix Kling的答案：

var $info = $('<div>', {
    css: {    
        position:    'fixed',
        top:         '0px',
        left:        '0px',
        opacity:     0.77,
        width:       '200px',
        height:      '200px',
        backgroundColor: '#B4DA55',
        border:      '2px solid black'
    }
}).prependTo(document.body);

$(window).bind('mousemove', function(e) {
    var ele = document.elementFromPoint(e.pageX, e.pageY);
    ele && $info.html('NodeType: ' + ele.nodeType + '<br>nodeName: ' + ele.nodeName + '<br>Content: ' + ele.textContent.slice(0,20));
});

更新: 背景颜色 !

- jAndy

---

在每个 mousemove 上这样做几乎是 CPU 过载。更不用说 OP 从未说明他想要用它来做什么了。 - gblazex

@galambalazs：不要太认真。然而，我的 CPU 负载不超过 20％，但是可以在内部 mousemove 处理程序周围放置一个 clearTimeout / setTimeout 平衡器;) - jAndy

Answer 3

这个可以完成任务（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