gpt4 book ai didi

javascript - 如何检测一个 Div 是否在另一个 Div 之外?

转载 作者:行者123 更新时间:2023-11-28 03:58:39 26 4
gpt4 key购买 nike

我正在制作一款游戏,我使用 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 的左 Angular 放在您的鼠标 X 和鼠标 Y 上。我的问题是,当我的鼠标拖动白色 div 时向下或向右,我可以将其从绿色 div 中拖出。

有办法解决这个问题吗?

最佳答案

因为当前的 JS 中不支持父选择器。

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

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

    //只需更改下面的父元素和子元素即可
    父元素 ~ 子元素 {
    适当的值(value);
    }

关于javascript - 如何检测一个 Div 是否在另一个 Div 之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47335670/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com