Question

我正在创建一个在所有边缘和角落均可调整大小的box元素。除了一件小事，它似乎工作正常。当我从顶部或左侧边缘调整大小时，在每次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-3px。

为什么盒子的右边没有放好。为什么在按下鼠标时重新调整？

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

Answer 1

这是一个非常有趣的问题。您的代码中有几个问题，但是跳转本身是由于您使用getBoundingClientRect来获取宽度和高度而引起的。在元素上，您具有边框，并且上述函数返回的高度和宽度将添加其大小。因此，当您将左边界或顶边界移动任意数量的像素时，它将始终在添加的宽度/高度（分别为左右边界或上下边界的总宽度）上增加2px。

我更改了：

我删除了添加在HTML元素上的侦听器，因为它们是多余的并且会引发错误
我将getBoundingClientRect用于顶部和左侧属性。我将其提取到一个单独的函数中，该函数考虑了滚动，如in this beautiful article所述。
我使用getComputedStyle作为高度和宽度
我将调整大小更改为相对于元素本身，而不是初始的X和Y坐标
我在方程式中添加了计算出的margin-top和margin-left，因此样式化元素不会影响调整大小

此处显示了工作副本：https://codepen.io/anon/pen/axeMge?editors=1111

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

1 个答案: