如何仅在用户手动调整Div大小时触发resizeHandler函数？

核心思路 #

通过鼠标事件标记用户交互状态，结合ResizeObserver过滤掉非用户手动触发的尺寸变化，精准响应手动调整操作。

具体代码实现 #

1. 绑定鼠标事件，标记用户是否正在拖动调整：

const resizableDiv = document.getElementById('your-resizable-div');
let isUserResizing = false;

// 开始拖动时标记状态
resizableDiv.addEventListener('mousedown', (e) => {
  // 可根据实际调整手柄的位置/类名优化判断条件，比如只在右下角拖动区触发
  const isResizeArea = e.offsetX > resizableDiv.clientWidth - 15 && e.offsetY > resizableDiv.clientHeight - 15;
  if (isResizeArea) {
    isUserResizing = true;
  }
});

// 结束拖动时重置状态（监听全局鼠标松开，避免鼠标移出元素后失效）
document.addEventListener('mouseup', () => {
  isUserResizing = false;
});

2. 用ResizeObserver过滤触发时机：

const observer = new ResizeObserver(() => {
  if (isUserResizing) {
    resizeHandler();
    // 可选：如果需要在调整结束后再触发一次，可在mouseup事件中额外调用resizeHandler()
  }
});

observer.observe(resizableDiv);

关键说明 #

• 鼠标按下的判断条件可以根据你的Div调整手柄位置自定义，比如通过特定类名或坐标范围，确保只有用户拖动调整区时才标记状态。
• 全局监听mouseup能避免鼠标移出元素后无法重置状态的问题，保证标记准确。
• 这种方式完全不受页面加载、max-height限制导致的自动布局变化影响，仅响应用户手动调整操作。

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