问题通过绝对坐标定位DOM元素

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

11321

2018-01-24 19:12

起源

那么你可以从这个问题得到一个不错的答案： stackoverflow.com/questions/48999/... - Orbling

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

看看这个解决方案是否可以帮到你 jsfiddle.net/eyxt2tt1/2 该脚本可以检测您的DOM元素是否在一组协调中。 - GibboK

答案:

你可以看看 document.elementFromPoint 虽然我不知道哪些浏览器支持它。
Firefox和Chrome都有。它也在MSDN中，但我不太熟悉这个文档，所以我不知道它包含在哪个IE版本中。

更新：

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

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

2018-01-24 19:18

@Felix Kling这听起来像是一种方式，我将检查浏览器的兼容性。 - Dennis Kreminsky

@etranger - FF <3.0没有它肯定。除此之外，它并没有那么糟糕： quirksmode.org/dom/w3c_cssom.html#documentview - galambalazs

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

只支持elementFromPoint的IE版本是9。 - dawnerd

@dawnerd：好吗？任何来源？ quirksmode.org/dom/w3c_cssom.html#documentview 说些不同的东西...... - Felix Kling

我无法阻止自己跳过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));
});

更新：背景颜色！

2018-01-24 19:41

每一个都这样做 mousemove 几乎是一个 CPU矫枉过正。更不用说OP从未说过他想要使用它。 - galambalazs

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

这样做（小提琴）：

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

2017-10-22 16:42

问题 通过绝对坐标定位DOM元素

答案:

热门问题

问题通过绝对坐标定位DOM元素