调整大小时，该部分总是会增长 - 除非在调试模式中逐步执行代码

Question

我有一个奇怪的问题，我无法解开思绪。

我在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;
        }
    }
};

Answer 1

我发现的问题是，我无法将鼠标坐标转换为受文档结构影响的样式坐标。 我还没有解决的是为什么代码在Firefox调试器中单步执行代码行时会起作用。