如何在HTML Canvas上禁用不必要的用户交互？

一、先修正你之前CSS的核心问题 #

你之前的代码里pointer-events: none是致命错误——这会让Canvas完全接收不到任何输入（点击、触摸都失效），游戏根本没法操作。另外zoom、scroll这些不是标准CSS属性，浏览器不支持，等于白写。

二、正确的配置方案 #

1. 必须的Viewport Meta标签

先在HTML头部加上这个，解决移动端缩放、滚动的基础问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

2. 核心CSS代码

这段代码能锁定页面、禁用选中等操作，同时保留Canvas的交互能力：

/* 锁定html和body，禁止滚动、选中等 */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 彻底禁止滚动 */
  user-select: none; /* 禁止文本选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none; /* 禁用触摸缩放、滚动等默认行为 */
  -webkit-touch-action: none;
  position: fixed; /* 固定定位，防止页面偏移 */
  top: 0;
  left: 0;
}

/* Canvas占满屏幕，保留交互能力 */
#canvas {
  width: 100%;
  height: 100%;
  display: block; /* 消除默认inline元素的间隙 */
  pointer-events: auto; /* 确保Canvas能接收游戏输入 */
}

3. 极简JS处理边缘情况

有些浏览器的默认行为（比如键盘按空格滚动、双击缩放）CSS拦不住，加几行精简代码搞定：

// 阻止键盘导致的页面滚动
window.addEventListener('keydown', (e) => {
  // 拦截空格、方向键等可能触发滚动的按键
  const blockKeys = [' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
  if (blockKeys.includes(e.key)) {
    e.preventDefault();
  }
});

// 阻止双击缩放（部分移动端浏览器）
window.addEventListener('dblclick', (e) => {
  e.preventDefault();
});

三、关键说明 #

• touch-action: none是触摸设备的核心，能禁用缩放、滚动、双击等默认触摸行为，加前缀兼容webkit内核浏览器（比如Safari、Chrome移动端）。
• overflow: hidden配合position: fixed彻底杜绝页面滚动的可能，包括滚动条触发的滚动。
• user-select: none多前缀覆盖所有主流浏览器，禁止选中文本。
• Canvas必须保留pointer-events: auto，否则游戏无法接收任何输入。

内容的提问来源于stack exchange，提问作者mini.daniel