如何在javascript中设置位置绝对元素的边界

。 我正在创建一个聊天/邮件应用程序，它具有可重新调整大小的菜单。比如谷歌的桌面应用程序。如果以正常速度调整棕色内容窗格的大小，可以看到边界按我的预期工作。我正在使用style.left和一个检查光标方向的函数，以便将光标与拖动条保持在一起

小虫：当把鼠标放在德拉巴上的时候，试着快速调整它的大小，让它飞出边界几次。它将强制执行，违反控制人的规则

编辑：在Edge和firefox中，这个bug的攻击性要小得多。它不会出现在右侧，有时只出现在左侧，但不会离开屏幕

这是我的视图控制器代码

//handles all mousemove and boundary cases.
mouseMove(e) {
    //size of right pane relative to container (percent)
    let percentRight = Math.round(this.messageWindowContentContainer.clientWidth/this.chatContainer.clientWidth * 100);
    //normal mousemove within the bounds min:25 and max:94
    if ((percentRight) <= 94 && percentRight >= 25) {
    document.getElementById("content2").innerHTML = "Content";
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");

}
//Only moves if right pane is out of bounds(left), mouse if moving right, and mouse is right of pane
if (percentRight > 94 && this.getCursorXPercentage(e) >= 6 && this.cursorMovingRight(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
//Only moves if right pane is out of bounds (right), mouse is moving left, and mouse is left of pane
if (percentRight < 25 && this.getCursorXPercentage(e) <= 75 && this.cursorMovingLeft(e)) {
    this.messageWindowContainer.setAttribute("style", "left:" + (e.clientX) + "px");
}
}

//if e.movementX is positive, moving right
cursorMovingRight(e) {
    return (Math.sign(e.movementX) === 1)
}
//if e.movementX is negative, moving left
cursorMovingLeft(e) {
    return (Math.sign(e.movementX) === -1)
}

//returns cursor location relative to container as percent
getCursorXPercentage(e) {
    let percentage = Math.round((e.clientX / this.chatContainer.getBoundingClientRect().width) * 100)
    console.log(percentage)
    document.getElementById("content2").innerHTML = percentage;
    return percentage;
}

---

好的，我在我的电脑上试过了，我想这是因为你在测试percentRight的当前值，而不是测试percentRight的未来值。这意味着，即使当前值是正常的，未来值也可能不是这样。如果您的DIV如示例中所示处于全屏状态，则percentLeft的新值将为e.clientX/WidthOfBox，在分配新值之前，您必须执行以下操作：

 this.messageWindowContainer.style.left = Math.min(Math.max(newPercentLeft,5),75) * widthOfTheBox + 'px'

您可以通过编写this.messageWindowContainer.style.left=yourvalue而不是setAttribute来缩短代码

编辑：

---

非常感谢你的答复。然而，你愿意清理你的答案吗？你的描述有点模糊。我知道英语不是你的1，我非常感谢你的帮助。我编辑过，事实上，你必须找到一个方程，给出新clientX函数的正确百分比。

 mouseMove(e) {
        var $0 = document.querySelector.bind(document),
            boxWidth =  $0('#mainMenuContainer').clientWidth,
            newPercentLeft = e.clientX / boxWidth,
            limitedNewPercentLeft = Math.min(Math.max(.2,newPercentLeft),.85)
        ;
        $0("#content2").innerHTML = limitedNewPercentLeft != newPercentLeft ? (newPercentLeft * 100 |0) : 'content';
        this.messageWindowContainer.style.left = limitedNewPercentLeft * boxWidth + 'px'
        console.log(newPercentLeft);
    }