Question

是否有一种简单的方法可以找到“覆盖”（即在其边界内）具有X / Y坐标对的像素的所有DOM元素？

Answer 1

虽然我不知道哪些浏览器支持它，但您可以查看document.elementFromPoint Firefox和Chrome一样。 It is also in the MSDN，但我对这个文档并不熟悉，所以我不知道它包含在哪个IE版本中。

<强>更新

要查找以某种方式在此位置的所有元素，您可以假设父级的所有元素都在此位置。当然，这不适用于绝对定位元素。

elementFromPoint只会给你最前面的元素。要真正找到其他元素，您必须将最前面元素的display设置为none，然后再次运行该函数。但是用户可能会注意到这一点。你必须尝试。

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

已更新：background-color！

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时，您应该注意这一点：

具有可见性的元素：隐藏或不透明度：0被视为可见，因为他们仍然在布局中消耗空间。在动画期间隐藏元素，该元素被认为是可见的，直到结束动画片在显示元素的动画期间，元素是被认为在动画开始时可见。

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

通过绝对坐标定位DOM元素

3 个答案: