如何将键盘事件替换为触屏事件？适配移动端触屏设备

核心思路 #

把原有键盘事件中的逻辑抽离成独立函数，让键盘和触屏事件共用同一套业务逻辑，同时通过触屏滑动的坐标计算判断方向，模拟键盘操作的完整流程。

步骤1：封装核心业务函数 #

先将原代码中keydown和keyup的逻辑拆分为可复用的函数，避免重复编写代码：

// 处理移动逻辑（对应原keydown事件中的核心操作）
function handleMove(direction) {
  moveCheck(oldLocation);
  
  switch (direction) {
    case 'left':
      shift('left');
      break;
    case 'right':
      shift('right');
      break;
    case 'up':
      vertikalShift('up');
      break;
    case 'down':
      vertikalShift('down');
      break;
  }
  
  saveTable();
  moveCheck(newLocation);
}

// 处理移动后的后续操作（对应原keyup事件中的逻辑）
function handleAfterMove() {
  if (startButton.matches('.start')) {
    return;
  }

  if (oldLocation.join() === newLocation.join()) {
    return;
  }

  scoreInfo.textContent = score;
  addCell(playObject);
  saveTable();
  winOrLose(playObject);
}

步骤2：重构键盘事件监听 #

用封装好的函数简化原键盘事件的代码：

// 键盘方向键映射
const keyDirectionMap = {
  'ArrowLeft': 'left',
  'ArrowRight': 'right',
  'ArrowUp': 'up',
  'ArrowDown': 'down'
};

// 监听键盘按下事件
document.addEventListener('keydown', (e) => {
  const direction = keyDirectionMap[e.key];
  if (direction) {
    handleMove(direction);
  }
});

// 监听键盘松开事件
document.addEventListener('keyup', (e) => {
  if (keyDirectionMap[e.key]) {
    handleAfterMove();
  }
});

步骤3：添加触屏滑动事件监听 #

通过touchstart记录触摸起始坐标，touchend计算滑动方向，触发对应逻辑：

// 存储触摸起始位置
let touchStartX = 0;
let touchStartY = 0;
// 最小滑动距离（避免误触）
const MIN_SWIPE_DISTANCE = 20;

// 监听触摸开始事件
document.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 阻止页面默认滚动行为
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
}, { passive: false });

// 监听触摸结束事件
document.addEventListener('touchend', (e) => {
  e.preventDefault();
  const touchEndX = e.changedTouches[0].clientX;
  const touchEndY = e.changedTouches[0].clientY;
  
  // 计算滑动差值
  const diffX = touchEndX - touchStartX;
  const diffY = touchEndY - touchStartY;
  
  // 判断滑动方向（优先取滑动距离更长的轴）
  if (Math.abs(diffX) > Math.abs(diffY)) {
    // 水平滑动
    if (Math.abs(diffX) >= MIN_SWIPE_DISTANCE) {
      const direction = diffX > 0 ? 'right' : 'left';
      handleMove(direction);
      handleAfterMove();
    }
  } else {
    // 垂直滑动
    if (Math.abs(diffY) >= MIN_SWIPE_DISTANCE) {
      const direction = diffY > 0 ? 'down' : 'up';
      handleMove(direction);
      handleAfterMove();
    }
  }
}, { passive: false });

可选：按屏幕尺寸切换事件监听 #

如果需要仅在小屏设备启用触屏事件、大屏启用键盘事件，可以通过屏幕宽度判断：

const MOBILE_SCREEN_THRESHOLD = 768; // 自定义小屏阈值（单位px）
const isMobileDevice = window.innerWidth <= MOBILE_SCREEN_THRESHOLD;

if (!isMobileDevice) {
  // 绑定键盘事件（即步骤2的代码）
} else {
  // 绑定触屏事件（即步骤3的代码）
}

注意：更推荐同时绑定两种事件，适配触屏+键盘混合的设备（如二合一平板）。

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