NextJS中touchmove事件异常：移动端拖拽面板仅触发一次

核心原因 #

移动端浏览器会对触摸事件触发默认行为（如页面滚动、缩放），当你在面板上触发touchstart后，浏览器的默认滚动逻辑会拦截后续的touchmove事件，导致事件仅触发一次就被浏览器接管。另外，React状态更新时若依赖项频繁变化，可能会导致事件监听被重复解绑/绑定，但这并非核心问题。

解决方案 #

1. 在touchstart阶段阻止默认行为
   在onPanelTouchStart函数中添加e.preventDefault()，直接阻断浏览器的默认触摸行为，确保touchmove事件能持续触发：

const onPanelTouchStart = (panel, e) => {
  e.preventDefault(); // 关键：阻止浏览器默认触摸行为
  // 你的拖拽初始化逻辑，比如设置draggingPanel、dragStartPos等状态
};

2. 可选：在touchmove中补充阻止默认行为
   为彻底避免浏览器默认行为干扰，也可以在touchmove事件处理中添加阻止操作：

const onTouchMove = (e: TouchEvent) => {
  e.preventDefault();
  onMove(e.touches[0].clientX, e.touches[0].clientY);
};

3. 稳定事件监听的依赖项
   你的useEffect依赖包含draggingPanel，拖拽过程中该状态变化会触发监听重新绑定。建议用useCallback包裹replacePanel等状态更新函数，保持函数引用稳定，避免不必要的监听解绑/绑定：

const replacePanel = useCallback((updatedPanel) => {
  // 你的面板更新逻辑
}, [/* 相关依赖 */]);

4. CSS层面禁用触摸行为
   给面板添加touch-action: none样式，从CSS层面直接禁用浏览器对该元素的触摸默认行为：

.panel {
  touch-action: none;
}

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