移动端浏览器BattleCity游戏战场内滑动延迟及Chrome兼容问题

我之前也碰到过类似的移动端触摸交互问题，结合你的场景和代码来看，这大概率是移动端浏览器对可滚动/交互元素的触摸默认行为干扰导致的——尤其是Chrome移动端会对表格这类元素的触摸操作做特殊处理（比如判断是否触发滚动），直接造成你的触摸事件监听出现延迟甚至完全失效。下面给你几个针对性的解决方案：

1. 阻止战场表格的默认触摸行为 #

在触摸事件触发时，如果目标是战场表格内的元素，立刻阻止浏览器的默认行为（比如滚动、缩放），这样可以消除Chrome的触摸延迟并确保事件能正常传递到你的逻辑里。修改你的触摸事件代码如下：

class Direction{ 
  Point first, last; 
  Game game; 

  void startListening(){ 
    window.onTouchStart.listen((ev) { 
      // 判断触摸目标是否属于战场表格
      if (ev.target is TableElement || ev.target is TableCellElement) {
        ev.preventDefault(); // 阻止默认滚动/触摸行为
      }
      last = null; 
      first = ev.touches.first.client; 
    }); 

    window.onTouchMove.listen((ev){ 
      if (ev.target is TableElement || ev.target is TableCellElement) {
        ev.preventDefault(); 
      }
      last = ev.touches.first.client; 
    }); 

    // 保留原有的touchEnd和键盘监听逻辑
    window.onTouchEnd.listen((ev) { 
      if(last == null || first.distanceTo(last) < 20) 
        game.player.shoot(); 
      else { 
        Point d = first - last; 
        if(d.x.abs() > d.y.abs()){ 
          if( first.x > last.x){ 
            game.player.changeDirection(Directions.left); 
          } else{ 
            game.player.changeDirection(Directions.right); 
          } 
        } else{ 
          if(first.y > last.y){ 
            game.player.changeDirection(Directions.up); 
          } else{ 
            game.player.changeDirection(Directions.down); 
          } 
        } 
      } 
    }); 

    window.onKeyPress.listen((k) { 
      //Shoot 
      if(k.which == 32) { 
        game.player.shoot(); 
      } 
      //Up 
      if(k.which == 119 || k.keyCode == KeyCode.UP){ 
        game.player.changeDirection(Directions.up); 
      } 
      //Down 
      if(k.which == 115 || k.keyCode == KeyCode.DOWN){ 
        game.player.changeDirection(Directions.down); 
      } 
      //Left 
      if(k.which == 97 || k.keyCode == KeyCode.LEFT){ 
        game.player.changeDirection(Directions.left); 
      } 
      //Right 
      if(k.which == 100 || k.keyCode == KeyCode.RIGHT){ 
        game.player.changeDirection(Directions.right); 
      } 
    }); 
  } 
}

2. 优化战场表格的CSS属性 #

直接通过CSS禁用表格的触摸默认行为，比JS层面的拦截更高效，能彻底解决Chrome的触摸延迟问题：

#battle-field-table {
  touch-action: none; /* 禁用所有触摸默认行为，比如滚动、缩放 */
  overflow: hidden; /* 防止表格出现滚动条 */
  user-select: none; /* 禁止文本选择，避免干扰触摸操作 */
}

3. 调整触摸事件监听的目标 #

与其监听window的触摸事件，不如直接绑定到战场表格元素上，这样可以减少事件冒泡的损耗，同时更精准地处理战场内的操作：

// 假设你的战场表格有id为battleField
Element battleField = querySelector('#battleField');
battleField.onTouchStart.listen((ev) {
  ev.preventDefault();
  last = null;
  first = ev.touches.first.client;
});
// 同理修改touchMove和touchEnd的监听目标为battleField

问题根源说明 #

移动端浏览器（尤其是Chrome）会对可能触发滚动的元素（比如表格、div等）添加300ms左右的触摸延迟，用来判断用户是要滑动滚动还是执行自定义操作。当你在战场表格内滑动时，浏览器优先处理滚动逻辑，导致你的触摸事件被延迟甚至忽略；而战场外没有可滚动元素，所以事件能正常触发。

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