节总是在调整大小时增长--除非在调试模式下逐步遍历代码。

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调试器中跨行代码行时，代码工作正常。