如何禁用页面touchMove阻止滑动，同时保留按钮的touch事件？

这个问题我之前也碰到过——直接在body上全局阻止touchmove的默认行为确实会“一刀切”影响所有元素的touch相关交互，包括按钮。核心原因是touch事件会冒泡到body，而你调用的preventDefault()会阻止整个事件流的默认行为，连按钮区域的touch操作也会受牵连。

这里有个简单有效的解决方案：在body的touchmove监听里，判断事件触发的元素是否是按钮（或按钮的子元素），只有非按钮区域的touchmove才阻止默认行为：

document.body.addEventListener("touchmove", function(event) {
  // 检查当前触发事件的元素是否属于按钮（包括按钮内部的子元素）
  const targetIsButton = event.target.closest('button') !== null;
  
  // 只有不是按钮的区域，才阻止页面滑动
  if (!targetIsButton) {
    event.preventDefault();
    // 这里可以去掉stopPropagation()，除非你有其他需要阻止冒泡的场景，否则没必要影响按钮的事件流
    // event.stopPropagation();
  }
}, false);

如果你的按钮是用自定义类名标识的（比如.interactive-btn），也可以换成类名判断：

document.body.addEventListener("touchmove", function(event) {
  const targetHasInteractiveClass = event.target.closest('.interactive-btn') !== null;
  if (!targetHasInteractiveClass) {
    event.preventDefault();
  }
}, false);

额外提示： #

• 确保按钮自身的touch事件（比如touchstart、touchend）没有被额外的preventDefault()阻止，否则还是会失效；
• 如果你不需要阻止事件冒泡，建议去掉event.stopPropagation()，避免影响其他元素的事件监听逻辑。

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