Javascript 从左侧调整div元素的大小会导致右侧移动几px

我正在创建一个在所有边和角上都可以调整大小的长方体元素。除了一件小事，它似乎工作得很好。当我从上边缘或左边缘调整大小时，右边缘（左边缘调整大小）或下边缘（上边缘调整大小）将在每个mousedown事件上增加几像素

我怀疑这与左边有机会改变之前宽度的改变有关，但即使有宽度调整的条件，我也得到了同样的结果

if(onLeftEdge) {
   console.log('box right: ' + b.right);
   box.style.left = event.clientX + 'px';
   box.style.width = (initialClientX - event.clientX + b.width) + 'px';
}
if(onTopEdge) {
   box.style.top = event.clientY + 'px';
   box.style.height = (initialClientY - event.clientY + b.height) + 'px';
}

当您在左侧调整大小时，控制台将显示右侧跳跃1-3倍

为什么箱子的右边不能保持原样呢。为什么它会在鼠标下降时重新调整

---

这是一个非常有趣的问题。您的代码中有几个问题，但跳转本身是因为您正在使用

getBoundingClientRect

获取宽度和高度。在您的元素上，您有边框，并且上面的函数返回的高度和宽度将添加它们的大小。因此，当您将左边框或上边框移动任意数量的像素时，它总是会在添加的宽度/高度（分别为左+右边框或上+下边框的总宽度）上添加2px

我改变的是：

我删除了添加到HTML元素上的侦听器，因为它们是多余的，并且会抛出错误

我对顶部和左侧属性使用了

getBoundingClientRect

。如前所述，我将其提取到一个单独的函数中，该函数考虑了滚动

我使用了高度和宽度的

getComputedStyle

我将调整大小更改为相对于元素本身，而不是初始X和Y坐标

我在等式中添加了计算的

边距顶部

和

边距左侧

，因此元素的样式设置不会影响大小调整

---

此处显示了一份工作副本：

有人能告诉我为什么这项投票被否决，以便我将来避免被否决吗？谢谢：）设置

框大小：边框框

在这里可能会有很大帮助…：）