Phaser 3移动端：解决摇杆与射击按钮无法同时触发的问题

核心问题分析 #

移动端触摸事件默认存在单点触摸限制，若摇杆和射击按钮的触摸事件监听未处理多点触摸逻辑，会出现按住摇杆时无法触发按钮点击的情况——浏览器/引擎会优先处理第一个触摸点的事件，忽略后续触摸点。

常见修复方案 #

• 改用多点触摸事件监听：放弃touchstart/touchend的单点监听，改用touchstart记录触摸点ID，touchmove和touchend时根据ID区分摇杆和按钮的触摸操作。示例逻辑：

  // 存储触摸点类型映射
  const touchMap = new Map();
  
  // 摇杆触摸启动
  document.getElementById('joystick').addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touchId = e.changedTouches[0].identifier;
    touchMap.set(touchId, 'joystick');
    initJoystickMovement(e.changedTouches[0]);
  });
  
  // 射击按钮触摸启动
  document.getElementById('fire-btn').addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touchId = e.changedTouches[0].identifier;
    touchMap.set(touchId, 'fire');
    startShooting();
  });
  
  // 全局触摸移动处理
  document.addEventListener('touchmove', (e) => {
    e.preventDefault();
    for (const touch of e.changedTouches) {
      if (touchMap.get(touch.identifier) === 'joystick') {
        updateJoystickPosition(touch);
      }
    }
  });
  
  // 全局触摸结束处理
  document.addEventListener('touchend', (e) => {
    for (const touch of e.changedTouches) {
      const touchType = touchMap.get(touch.identifier);
      if (touchType === 'joystick') {
        stopJoystickMovement();
      }
      touchMap.delete(touch.identifier);
    }
  });
  

• 避免事件拦截冲突：若代码中存在e.stopPropagation()，会导致其他触摸事件无法触发，仅在必要时阻止默认行为（如防止页面滚动），不要阻止事件传播。
• 开启引擎多点触摸支持：若使用游戏引擎（如Phaser、Cocos），需手动开启多点触摸模式。例如Phaser可在配置中设置：

  const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    input: {
      touch: { multitouch: true }
    },
    scene: { /* 场景配置 */ }
  };
  

验证步骤 #

1. 在浏览器开发者工具的移动端模拟模式中，开启多点触摸模拟（Chrome DevTools按住Shift点击可模拟多触摸点），测试摇杆与按钮是否能同时响应。
2. 检查全局触摸事件代码，避免存在document.addEventListener('touchstart', e => e.preventDefault())这类拦截所有触摸事件的逻辑。

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