通过为游戏容器或目标元素设置 touch-action: none 并配合 user-select: none，可彻底禁用该区域的默认触摸行为（如滚动、缩放、刷新），同时保留 JavaScript 手势逻辑的完全控制权。
通过为游戏容器或目标元素设置 `touch-action: none` 并配合 `user-select: none`，可彻底禁用该区域的默认触摸行为（如滚动、缩放、刷新），同时保留 javascript 手势逻辑的完全控制权。
在移动端浏览器中，当用户在可滚动区域（如 ）内进行垂直拖拽时，浏览器会默认触发页面滚动或下拉刷新（特别是 iOS Safari 的“橡皮筋”效果）。许多开发者试图通过监听 touchstart 或 touchmove 事件并调用 e.preventDefault() 来阻止该行为，但往往失效——原因在于：若事件监听器未在捕获阶段注册，或未满足 passive: false 的显式声明，现代浏览器会忽略 preventDefault() 调用（出于性能优化）。
真正可靠且语义清晰的解决方案是使用 CSS 的 touch-action 属性。它专为控制触摸行为而设计，无需 JavaScript 干预即可直接禁用浏览器原生手势：
/* 推荐：仅作用于游戏容器，避免影响全局交互 */
#game-container {
touch-action: none; /* 禁用所有原生触摸行为（滚动、缩放、双击等） */
user-select: none; /* 防止误触选中文本（提升游戏体验） */
-webkit-user-drag: none; /* 可选：禁用 WebKit 下的拖拽光标 */
}⚠️ 注意事项：
- ❌ 不要全局设置
* { touch-action: none }—— 这将导致整个页面失去滚动能力，严重影响可访问性与用户体验； - ✅ 应精确作用于游戏画布、Canvas 容器或核心交互区域（如
#game,.board,.game-area）； - ✅ 若需支持部分方向操作（例如仅允许水平滑动、禁止垂直滚动），可用
touch-action: pan-x或touch-action: pan-y； - ✅ 在 JavaScript 中仍可正常监听
touchstart/touchmove/touchend事件并实现自定义手势（如 swipe、drag、tap），touch-action: none仅屏蔽浏览器默认行为，不阻碍事件分发。
此外，为确保事件监听器生效，建议在绑定 touchmove 时显式声明 passive: false（尤其在 Chrome/Firefox 中）：
立即学习“前端免费学习笔记（深入）”；
const gameEl = document.getElementById('game-container');
gameEl.addEventListener('touchmove', handleTouchMove, { passive: false });
function handleTouchMove(e) {
e.preventDefault(); // 此时有效
// 自定义拖拽逻辑...
}综上，touch-action: none 是解决该问题的标准、高效且符合 Web 标准的方案——它从源头禁用浏览器默认触摸响应，让开发者能完全掌控交互逻辑，正如 2048 等成熟移动端网页游戏所采用的方式。
