如何检测一个 div 是否在另一个 div 之外？答案

【问题标题】：How Can I Detect If One Div Is Outside Another Div?如何检测一个 div 是否在另一个 div 之外？
【发布时间】：2020-11-13 07:32:01
【问题描述】：

我正在制作游戏，我使用的是 div 而不是 canvas.rect，我希望一个 div 始终位于另一个 div 内。我在编写一个看起来像这样的测试脚本时遇到了这个问题。

        var mousex, mousey;
          function mousepos(e){
            mousex = e.clientX;
            mousey = e.clientY;
            document.getElementById("xy").innerText = mousex + " , " + mousey;
          }
          function testdiv(){
            document.getElementById("testdiv").style.left = mousex;
            document.getElementById("testdiv").style.top = mousey;
            setTimeout(testdiv, 30);
          }

          #city{
            border: 1px dotted white;
            background-color: lightgreen;
            height: 500;
            width: 500;
            resize: both;
            overflow: hidden;
            max-height: 500px;
            max-width: 500px;
            min-height: 100px;
            min-width: 100px;
          }
          #xy{
            color: white;
          }
          #testdiv{
            background-color: white;
            position: absolute;
            width: 100px;
            height: 100px;
          }
          #body{
            background-color: black;
          }

    <body id="body" onload="testdiv()">
        <center>
          <div id="city" onmousemove="mousepos(event);">
            <div id="testdiv"></div>
          </div>
          <p id="xy"></p>
        </center>
     </body>

当您的鼠标位于绿色的大 div 上时，代码会检测您的鼠标 X 和鼠标 Y，然后它将白色 div 的左角放在鼠标 X 和鼠标 Y 上。我的问题是当我的鼠标拖动白色 div 时向下或向右，我可以将它拖离绿色 div。

有什么办法可以解决这个问题吗？

【问题讨论】：

您可以在父元素上调用 Element.getBoundingClientRect() 并检查 mousex/mousey 是否大于 left/top 而小于 width/height
codepen.io/piotrazsko/pen/VrrZBq
我不推荐使用递归。为了获得高性能，请使用循环。

标签： javascript html dom-events mouseover

【解决方案1】：

由于当前 JS 中没有支持的父选择器。

您可以使用 Jquery 或 CSS，我列出了 Javascript 选项和 CSS 选项

选项 1：$("a.active").parents('li').css("property", "value");
选项 2：Sibling Combination 匹配任何 ParentElement 前面有 ChildElement 元素的元素。

// Just change the parent and child elemets below ParentElement ~ ChildElement { property: value; }

【讨论】：

我不想使用 jQuery，所以我不能使用这个选项。另外，我不明白您提供的第二个选项。你能澄清一下吗？
您可以使用css 选择div，使用上面列出的div 关系.. 如果您点击链接... 您将看到更多示例

【解决方案2】：

您可以在更改子 div 位置之前进行检查，如果它的新位置超出您想要的位置，您可以跳过它。

类似：

if (mouse.x > parent_div_width){
    return;
}
else {
   child_div_Xpos = mouse.x
}

【讨论】：

【解决方案3】：

你可以试试这个代码：

  var mousex, mousey;

function mousepos(e) {
    mousex = e.clientX;
    mousey = e.clientY;
    document.getElementById("xy").innerText = mousex + " , " + mousey;
}
var coordCity = document.getElementById("city").getBoundingClientRect();
var elem = document.getElementById("testdiv");
let i = 0

function testdiv() {
    elem.style.left = mousex + 'px';
    elem.style.top = mousey + 'px';
    var coord = elem.getBoundingClientRect();
    if(coord.left < coordCity.left ||
      coord.right > coordCity.right ||
      coord.bottom > coordCity.bottom || 
      coord.top < coordCity.top) {
      console.log('rect is out');
    };
    i++;
    if(i === 100) {
        return;
    }
    setTimeout(testdiv, 50);
}

你需要在css px中添加宽度和高度的值：

#city{
            border: 1px dotted white;
            background-color: lightgreen;
            height: 500px;
            width: 500px;
            resize: both;
            overflow: hidden;
            max-height: 500px;
            max-width: 500px;
            min-height: 100px;
            min-width: 100px;
          }

并且总是将你的节点保存到变量中，因为它让你的代码更快，我使用变量 i 进行停止测试。您可以使用其他解决方案。我创建了下一个应用程序： https://codepen.io/piotrazsko/pen/VrrZBq

【讨论】：

“让 i = 0”和“if(i === 100){return;”的作用是什么玩吗？
这是从 testdiv 函数返回的

【解决方案4】：

我想出了一个简单易懂的方法来做到这一点。

我为 testdiv 的宽度、高度、x、y、x 偏移量创建了一个变量鼠标，和鼠标的 y 偏移量。

var divw = 50;
var divh = 50;

var divofx = 25;
var divofy = 25;

然后我为城市 div 的宽度做了一个变量。

var cityw = 500;

然后，我使用 screen.width / 2 来找到屏幕的中心。

var centerx = screen.width / 2;

然后，我把下面的代码放到main函数中，让testdiv的大小随时可以改变：

document.getElementById("testdiv").style.width = divw;
document.getElementById("testdiv").style.height = divh;

然后我使用宽度变量来查找城市 div 的边缘。

然后，基于边缘，我做了一些简单的碰撞检测 if 语句。我也不需要更改 Y mutch，因为它几乎保持不变。

        if(mousex + divw > centerx + (cityw / 2)){
          mousex = centerx + (cityw / 2) - divw;
        }
        else{
          document.getElementById("testdiv").style.left = mousex;
        }
        if(mousey > (cityw - divh) + 10){
          mousey = (cityw - divh) + 10;
        }
        else{
          document.getElementById("testdiv").style.top = mousey;
        }
        if(mousex < centerx - cityw / 2){
          mousex = centerx - cityw / 2;
        }
        if(mousey < 8){
          mousey = 8;
        }
        setTimeout(testdiv, 1);

现在整个程序看起来像：

<html>

  <head>

    <style>

      #city{
        border: 1px dotted white;
        background-color: lightgreen;
        height: 500;
        width: 500;
        overflow: none;
        max-height: 500px;
        max-width: 500px;
        min-height: 100px;
        min-width: 100px;
      }
      #xy{
        color: white;
      }
      #testdiv{
        background-color: white;
        position: absolute;
        width: 100px;
        height: 100px;
      }
      #body{
        background-color: black;
      }

    </style>
    <script>

    var mousex, mousey;
    var divw = 50;
    var divh = 50;
    var divofx = 25;
    var divofy = 25;
    var cityw = 500;

      function mousepos(e){
        mousex = e.clientX - divofx;
        mousey = e.clientY - divofy;
        document.getElementById("xy").innerText = mousex + " , " + mousey;
      }

      function testdiv(){
        var centerx = screen.width / 2;

        document.getElementById("city").style.width = cityw;
        document.getElementById("testdiv").style.width = divw;
        document.getElementById("testdiv").style.height = divh;

        if(mousex + divw > centerx + (cityw / 2)){
          mousex = centerx + (cityw / 2) - divw;
        }
        else{
          document.getElementById("testdiv").style.left = mousex;
        }
        if(mousey > (cityw - divh) + 10){
          mousey = (cityw - divh) + 10;
        }
        else{
          document.getElementById("testdiv").style.top = mousey;
        }
        if(mousex < centerx - cityw / 2){
          mousex = centerx - cityw / 2;
        }
        if(mousey < 8){
          mousey = 8;
        }
        setTimeout(testdiv, 1);
      }

    </script>

  </head>

  <body id="body" onload="testdiv()" onmousemove="mousepos(event);">

    <center>
      <div id="city" onmousemove="mousepos(event);">
        <div id="testdiv"></div>
      </div>

      <p id="xy"></p>
    </center>

  </body>

</html>

【讨论】：