节在调整大小时总是增长——除非在调试模式下逐步执行代码

Section always grows when resizeing - except when in debug mode stepping through the code

本文关键字:模式 调试 代码 执行 小时 调整      更新时间:2023-09-26

我有一个奇怪的问题,我无法解决。

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

我发现的问题是,我未能将鼠标坐标转换为样式坐标,这受到文档结构的影响。我仍然没有解决的问题是,在Firefox调试器中逐行执行代码时,代码为什么能工作。