Angular+PhaserJS项目中Bootstrap Modal点击干扰Canvas按钮的解决方法

方法一：阻止模态框事件冒泡 #

在Bootstrap模态框的根元素上添加点击事件阻止冒泡，让模态框内的点击事件不会传递到下层的Phaser Canvas：

<div class="modal fade" id="exampleModal" (click)="$event.stopPropagation()">
  <!-- 模态框内容区域 -->
</div>

如果模态框内有多层嵌套元素，也可以给内容容器添加同样的处理，确保所有内部点击都不会向上冒泡。

方法二：动态启用/禁用Phaser输入系统 #

借助Bootstrap模态框的显示、隐藏事件，在模态框弹出时关闭Phaser的输入监听，隐藏时恢复：

1. 在组件中保存Phaser的Scene实例：

private gameScene: Phaser.Scene;

// 初始化游戏时获取并保存Scene引用
this.gameScene = this.phaserGame.scene.get('GameScene'); // 替换为你的实际Scene名称

2. 绑定模态框的显示/隐藏事件：

<div class="modal fade" id="exampleModal"
     (shown.bs.modal)="disablePhaserInput()"
     (hidden.bs.modal)="enablePhaserInput()">
  <!-- 模态框内容 -->
</div>

3. 实现输入控制函数：

disablePhaserInput() {
  this.gameScene?.input.enabled = false;
}

enablePhaserInput() {
  this.gameScene?.input.enabled = true;
}

这种方式能彻底隔离模态框显示期间的Phaser输入，避免任何误触发。

方法三：在Phaser事件回调中判断模态框状态 #

在Phaser按钮的点击逻辑里，先检查模态框是否处于显示状态，若是则跳过游戏逻辑：

// 通过原生DOM判断模态框状态
onPhaserButtonClick() {
  const modalElement = document.getElementById('exampleModal');
  if (modalElement?.classList.contains('show')) {
    return;
  }
  // 执行正常的游戏按钮逻辑
}

内容的提问来源于stack exchange，提问作者Titus Sutio Fanpula