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

Question

我正在创建一个可在所有边缘和角落调整大小的框元素。它似乎工作正常，除了一件小事。当我从顶部或左边缘调整大小时，右侧(左边缘调整大小)或底部(上边缘调整大小)将在每次鼠标按下事件中增加几像素。

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

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-3px。

为什么盒子的右侧不留在原地。为什么它会在鼠标按下时重新调整？

https://codepen.io/elephantjay/pen/yrRPLM?editors=1111

Answer 1

这是一个非常有趣的问题。您的代码中遇到了几个问题，但跳转本身源于您使用getBoundingClientRect来获取宽度和高度的事实。在您的元素上，您有边框，上述函数返回的高度和宽度将添加其大小。因此，当您移动任意数量的像素的左边框或上边框时，它总是会在增加的宽度/高度(分别为左+右边框或顶部+底部边框的总宽度)上增加 2px。

我更改了什么：

1. 我删除了添加到 HTML 元素上的侦听器，因为它们是多余的并且抛出错误
2. 我对顶部和左侧属性使用了getBoundingClientRect。我将其提取到一个单独的函数中，该函数考虑了滚动，如这篇美丽的文章所述。
3. 我用getComputedStyle表示高度和宽度
4. 我将调整大小更改为相对于元素本身，而不是初始 X 和 Y 坐标
5. 我在公式中添加了计算margin-top和margin-left，因此设置元素样式不会影响调整大小

工作副本如下所示：https://codepen.io/anon/pen/axeMge?editors=1111