Question

好的，我有这样的事情：

<div id='father' style='width: 100%; height: 100px; position:absolute; top: 0px; left: 0px;overflow:hidden;'>
    <div id='box' style='width: 50px; height: 50px;'></div>
</div>
<script>
function FrandomBoxPos(elem){
    cuadrante = rand(1,4);
    if (cuadrante == 1){
        elem.style.top = "-"+rand(100, 200)+"px";
        elem.style.left = rand(1, document.body.offsetWidth)+"px";
    } else if (cuadrante == 2){
        elem.style.top = rand(1, document.body.offsetHeight)+"px";
        elem.style.left = rand(-300, (document.body.offsetWidth*-1)-300)+"px";
    } else if (cuadrante == 3){
        elem.style.top = rand(document.body.offsetHeight, document.getElementById('DcontenidoSubmenu').offsetHeight+100)+"px";
        elem.style.left = rand(1, document.body.offsetWidth)+"px";
    } else if (cuadrante == 4){
        elem.style.top = rand(1, document.body.offsetHeight)+"px";
        elem.style.left = rand(document.body.offsetWidth+400, document.body.offsetWidth+600)+"px";
    }
}
FrandomBoxPos(document.getElementById('box'));
</script>

有时，在我运行FrandomBoxPos之后，我可以在他的父亲身上看到“盒子”（我不应该）。因此，如果我能检查'box'是否超出'父亲'，我可以做类似的事情：

while isOutOf('box', 'father') == false:
    FrandomBoxPos(document.getElementById('box'));

以下是代码：http://pastebin.com/bnnWLwdY 我不能粘贴它jsFiddle因为在那里不起作用。当你将鼠标放在任何“部分”按钮上并且一个BOX没有移动而且没有到位（进入红色边框）时就会出现问题......

Answer 1

if((child.posX > dad.posX && child.posX < dad.posX + dad.width) || (child.posX + child.width > dad.posX && child.posX + child.width < dad.posX + dad.width) ) {
   //it is in horizontal boundaries
     if((child.posY > dad.posY && child.posY < dad.posY + dad.width) || (child.posY + child.width > dad.posY && child.posY + child.width < dad.posY + dad.width) ) {
   //child overlaps parent
    }
}

我认为这应该有效..

如何用普通的JS来检查div是否超出了他的父亲

1 个答案: