Question

我在父div中有一个div。有没有一种方便的方法来检测子div是否与其父边界重叠？

<div id="parent" style="width:100px;height:100px;border:1px solid black;">
    <div id="child" style="position:absolute;width:50px;height:50px;border:1px solid black;left:20px;top:40px;">
    </div>
</div>

 <div id="button" style="position:absolute;top:140px"> click </div>


 var i= 20;

$("#button").click(function(){
    $("#child").css("left",i+"px");
     i++;
     if (overlaps($("#child"),$("#child").parent()) alert('overlaps');
});

我正在寻找上述overlaps函数的实现，不，我不寻找宽度和位置的简单比较，因为我正在寻找一个涵盖所有方向重叠的相当通用的解决方案

Answer 1

好的，我自己创建了它：

$.fn.withinParent = function() {

    var left = $(this).offset().left;
    var top = $(this).offset().top;
    var right = left+$(this).width();
    var bottom = top+$(this).height();

    var pleft = $(this).parent().offset().left;
    var ptop = $(this).parent().offset().top;
    var pright = pleft+$(this).parent().width();
    var pbottom = ptop+$(this).parent().height();
    console.log(right);
    console.log(pright);
    var b = left>pleft && top>ptop && right<pright && bottom < pbottom;
    return b;
}

检测元素边界是否与父母边界重叠？

1 个答案: