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视图（信息here），可让您（或多或少）准确地看到对象的堆叠方式。如果你以前从未看过它，那至少很酷，可以查看。

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;

}

如何检测重叠的HTML元素

3 个答案: