如何让JS Canvas按钮按住触发的位移功能同时适配PC和移动端？

问题原因&修改方案 #

• 你用到的touchdown、touchup不属于标准触摸事件，移动端原生触摸按下/松开对应的事件是touchstart和touchend，同时还要处理触摸中断的touchcancel事件，避免出现触摸中断后定时器一直运行的问题。
• 原代码存在两处明显问题：一是addEventListeter拼写错误（少了字母n，正确为addEventListener）；二是每次按下时重复绑定松开事件，会导致内存泄漏、定时器清除异常的问题。
• 移动端触摸事件默认会触发300ms点击延迟，还可能触发长按菜单、页面缩放等默认行为，需要阻止默认行为避免干扰功能。
• 额外补充了鼠标移出按钮、触摸滑出按钮的场景处理，避免松开后定时器还在后台运行。

修改后代码 #

// 定时器变量提到外部统一管理，避免重复绑定
let moveInterval = null;

// 按下逻辑复用，多方向按钮可以封装参数适配不同方向
const handleStart = () => {
  // 每次按下先清旧定时器，避免重复触发
  if (moveInterval) clearInterval(moveInterval);
  moveInterval = setInterval(() => {
    player.y--;
  }, 50);
};

// 松开/中断逻辑复用，覆盖所有结束场景
const handleEnd = () => {
  if (moveInterval) {
    clearInterval(moveInterval);
    moveInterval = null;
  }
};

// 绑定鼠标端事件
upBtn.addEventListener('mousedown', handleStart);
upBtn.addEventListener('mouseup', handleEnd);
upBtn.addEventListener('mouseleave', handleEnd); // 鼠标移出按钮也停止移动

// 绑定移动端触摸事件
upBtn.addEventListener('touchstart', (e) => {
  // 阻止默认行为，避免触发模拟鼠标事件、长按菜单、点击延迟等问题
  e.preventDefault();
  handleStart();
});
upBtn.addEventListener('touchend', handleEnd);
upBtn.addEventListener('touchcancel', handleEnd); // 触摸中断（如滑出按钮、切后台）也停止移动

如果需要适配四个方向按钮，只需要把方向修改逻辑抽成参数传入handleStart即可。

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