基于浏览器屏幕尺寸移动DOM元素的原生JS代码问题排查

核心错误点 #

• 你给window.onresize赋值的逻辑错误：window.onresize = srPos()会立即执行srPos函数，将返回的undefined作为事件回调，后续窗口尺寸变化时不会触发位置调整，正确写法是将函数本身赋值给事件，去掉末尾的括号：window.onresize = srPos。
• 你不需要手动做detach/attach相关处理：DOM原生的prepend方法传入已存在于文档中的节点时，会自动将该节点从原有父节点移除，再插入到新父节点的头部，无需额外操作节点的解绑逻辑。

优化建议 #

resize事件会在窗口拖动过程中高频触发，频繁操作DOM可能产生不必要的性能损耗，建议添加防抖逻辑控制触发频率。

修正后代码 #

// 页面首次加载执行一次位置调整
srPos();
// 给resize事件绑定回调，直接赋值函数本身，不要加执行括号
window.onresize = srPos;

// 可选防抖实现，放开注释即可使用
/*
let resizeTimer = null;
window.onresize = function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(srPos, 200);
}
*/

function srPos() {
    const ww = window.innerWidth,
        sr = document.getElementById("gcs-box"),
        pp = document.getElementById("primary-panel"),
        sp = document.getElementById("secondary-panel");
    
    if (ww > 991) {
        sp.prepend(sr);
    } else {
        pp.prepend(sr);
    }        
}

内容的提问来源于stack exchange，提问作者santa