容器底部拖拽Resize卡顿问题求助：快速拖拽会中断调整

问题根源分析 #

你遇到的快拖就中断、卡顿的问题，大概率是这几个原因：事件监听的响应不及时，鼠标快速移动时脱离了监听范围；或者频繁修改容器高度导致浏览器连续重排，拖慢了响应速度；也可能是拖拽过程中被文本选择这类默认行为干扰了。

具体优化步骤 #

1. 把事件绑定到document上，避免丢事件 #

原方案可能只把mousemove绑在容器或手柄上，鼠标一快移出元素就断了。直接绑到document上，不管鼠标移到哪都能监听到：

const resizeHandle = document.getElementById('resize-handle');
const targetContainer = document.getElementById('target-container');
let isResizing = false;
let startY = 0;
let startHeight = 0;

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  startY = e.clientY;
  // 提前获取初始高度，别在拖拽时反复查DOM
  startHeight = parseInt(window.getComputedStyle(targetContainer).height, 10);
  
  // 直接绑document，稳得一批
  document.addEventListener('mousemove', handleResize);
  document.addEventListener('mouseup', stopResize);
  
  // 阻止默认行为，别让拖拽时选中文本或触发其他事件
  e.preventDefault();
  e.stopPropagation();
});

function handleResize(e) {
  if (!isResizing) return;
  const deltaY = startY - e.clientY;
  targetContainer.style.height = `${startHeight + deltaY}px`;
}

function stopResize() {
  isResizing = false;
  // 用完及时解绑，别占内存
  document.removeEventListener('mousemove', handleResize);
  document.removeEventListener('mouseup', stopResize);
}

2. 用requestAnimationFrame减少重排 #

频繁改height会让浏览器不停重排，卡得要死。把尺寸修改包在requestAnimationFrame里，让浏览器统一处理，性能会好很多：

function handleResize(e) {
  if (!isResizing) return;
  requestAnimationFrame(() => {
    const deltaY = startY - e.clientY;
    targetContainer.style.height = `${startHeight + deltaY}px`;
  });
}

3. 禁用拖拽时的文本选择 #

快速拖拽时很容易不小心选中文本，打断拖拽流程。给body加个类，拖拽时禁用选择：

body.resizing {
  user-select: none;
  /* 可选：阻止其他元素抢事件 */
  pointer-events: none;
}

// mousedown时加类，mouseup时去掉
resizeHandle.addEventListener('mousedown', (e) => {
  // ... 原有逻辑
  document.body.classList.add('resizing');
});

function stopResize() {
  // ... 原有逻辑
  document.body.classList.remove('resizing');
}

4. 换成Pointer Events（更稳定） #

用现代的pointerdown/pointermove/pointerup替代鼠标事件，不仅支持鼠标还支持触摸，而且有指针锁定功能，再也不怕鼠标移出窗口丢事件：

resizeHandle.addEventListener('pointerdown', (e) => {
  isResizing = true;
  startY = e.clientY;
  startHeight = parseInt(window.getComputedStyle(targetContainer).height, 10);
  
  document.addEventListener('pointermove', handleResize);
  document.addEventListener('pointerup', stopResize);
  // 锁定指针，就算鼠标移出窗口也能继续监听
  e.target.setPointerCapture(e.pointerId);
  
  e.preventDefault();
});

function handleResize(e) {
  if (!isResizing) return;
  const deltaY = startY - e.clientY;
  targetContainer.style.height = `${startHeight + deltaY}px`;
}

function stopResize(e) {
  isResizing = false;
  document.removeEventListener('pointermove', handleResize);
  document.removeEventListener('pointerup', stopResize);
  e.target.releasePointerCapture(e.pointerId);
}

5. 减少DOM查询 #

别在handleResize里反复调用getComputedStyle，这种DOM查询很耗性能，在mousedown时一次性获取初始值就够了。

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