javascript - 如何检测重叠的 HTML 元素

Question

是否可以在 HTML 页面中轻松找到被给定元素 (div) 隐藏的元素？

如果可能的话，我更喜欢 jQuery。你知道这样的插件吗？

我在 jQuery API ( http://api.jquery.com/ ) 中进行了搜索，但没有找到有用的东西。

Answer 1

一种可能的解决方案是jQuery Collision扩展：http: //sourceforge.net/projects/jquerycollision/。

JQuery 扩展返回两个选择器之间的冲突。处理填充、边距、边框，并且可以确定重叠或外部部分。返回 JQuery“重叠”对象。要求：jquery1.8.3+，示例还要求：jqueryui1.9.2+

Answer 2

听起来您正在寻找用于调试目的的东西，但是如果我错过了这个问题，请告诉我！

Firefox 有一个非常简洁的 3D 视图（此处为信息），可让您（或多或少）准确地看到对象是如何堆叠的。如果您以前从未看过它，那么它至少足够酷，可以检查一下。

Answer 3

您可以使用以下脚本：

http://jsfiddle.net/eyxt2tt1/2/

基本上它的作用是：

• 计算每个 DOM 元素的尺寸，并与用户的鼠标坐标进行比较
• 如果匹配返回一个 DOM 元素列表

---

$(document).click(function (e) {
    var hitElements = getHitElements(e);
    var output = $('#output');
    output.html('');
    for (var i = 0; i < hitElements.length; ++i) {
        output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].id);

    };

});

var getHitElements = function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];
    $(':visible').each(function () {
        console.log($(this).attr("id"), $(this).outerWidth());
        var offset = $(this).offset();
        console.log('+++++++++++++++++++++');
        console.log('pageX: ' + x);
        console.log('pageY: ' + y);
        console.log($(this).attr("id"), $(this).offset());
        console.log('+++++++++++++++++++++');
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            console.log('included: ', $(this).attr("id"));
            console.log('from 0p far x: ', $(this).attr("id"), offset.left + $(this).outerWidth());
            console.log('from 0p far y: ', $(this).attr("id"), offset.top + $(this).outerHeight());
            hitElements.push($(this));
        }
    });

    return hitElements;

}