我有一个奇怪的问题，我无法解决问题。
我在 HTML 文档中有一个部分，我通过拖动边框来调整大小。
当我拖动左边框或下边框时，一切都很好，并且该部分的大小已正确调整。
当我拖动顶部或左侧边框时，框总是变大。除此之外，当我调试代码时，逐行逐行执行。在这种情况下，框会随着鼠标的移动而正确地增长或缩小。
我猜事件模型中有些东西，或者我不完全理解的样式调整。
这只是原型代码，我没有使用任何库（只是普通的香草 JavaScript）。
// reSizeData is populated by mouse event that start the drag process. It contain the HTMLElement that are resized (node), and which border is being dragged (action)
var reSizeData = {node: null, action: "", inProgress: false}
function reSize(ev){
ev.stopPropagation();
var node = reSizeData.node;
if (node === undefined) return false;
var borderWidth = styleCoordToInt(getComputedStyle(node).getPropertyValue('border-left-width'));
// check and set the flag in reSizeData indicating that a resize is in progress.
// this makes repeated calls to be dropped until current resize event is complete.
if (reSizeData.inProgress === false) {
reSizeData.inProgress = true;
if (node.getBoundingClientRect) {
var rect = node.getBoundingClientRect();
switch (reSizeData.action) {
case "left" :
// this is only working while debugging
node.style.width = Math.max(rect.right - ev.clientX, 20) + 'px';
node.style.left = ev.clientX + 'px';
break;
case "right" :
// this working perfectly
node.style.width = Math.max(ev.clientX - rect.left - borderWidth, 20) + 'px';
break;
case "top":
// this is only working while debugging
node.style.height = Math.max(rect.bottom - ev.clientY, 20) + 'px';
node.style.top = ev.clientY + 'px';
break;
case "bottom":
// this is working perfectly
node.style.height = Math.max(ev.clientY - rect.top - borderWidth, 20) + 'px';
break;
}
// clear the resize in progress flag
reSizeData.inProgress = false;
}
}
};