如何检测fullscreenchange事件是否由按下F11触发

要区分全屏切换是由图标点击还是F11触发，我们可以通过状态标记的方式实现高效检测，具体修改如下：

核心思路 #

• 新增一个状态变量，标记当前全屏切换是否由图标点击触发
• 图标点击触发全屏时设置状态为true；在fullscreenchange事件中根据状态判断触发源，执行对应逻辑后重置状态
• 监听F11按键事件作为辅助校验，确保触发源判断准确

修改后的完整代码 #

setFullScreenIcon(){
    // 新增状态变量：标记是否由图标触发全屏切换
    let isIconTriggered = false;

    const displayFullScreenIcon = () => {
      BaseScene.fullScreenIcon = this.add
        .image(0, 0, 'enterFullScreenIcon')
        .setOrigin(.5, 1)
        .setInteractive();

      const fullScreenIconScaleXAndY = BaseScene.windowWidth * .05 / BaseScene.fullScreenIcon.width;
      BaseScene.fullScreenIcon.setScale(fullScreenIconScaleXAndY, fullScreenIconScaleXAndY);
    };

    const toggleFullScreen = () => {
      // 标记当前是图标触发的切换
      isIconTriggered = true;
      this.scale.isFullscreen ? this.scale.stopFullscreen() : this.scale.startFullscreen();
    };

    const handleFullScreenChange = () => {
      if (isIconTriggered) {
        // 图标触发的情况：切换图标纹理并保持显示
        BaseScene.fullScreenIcon.setTexture(
          this.scale.isFullscreen ? "exitFullScreenIcon" : "enterFullScreenIcon"
        );
        BaseScene.fullScreenIcon.setVisible(true);
      } else {
        // F11触发的情况：直接隐藏图标
        BaseScene.fullScreenIcon.setVisible(false);
      }
      // 重置状态标记，避免影响下一次判断
      isIconTriggered = false;
    }
    
    const setupFullScreenHandlers = () => {
      BaseScene.fullScreenIcon.on('pointerdown', toggleFullScreen);
      document.addEventListener("fullscreenchange", handleFullScreenChange);

      // 监听F11按键，确保触发时状态标记为false
      document.addEventListener('keydown', (e) => {
        if (e.key === 'F11') {
          isIconTriggered = false;
          // 若需要覆盖浏览器默认F11行为，可添加 e.preventDefault()
        }
      });
    };
    
    displayFullScreenIcon();
    setupFullScreenHandlers();
  }

关键修改点说明 #

1. 状态变量isIconTriggered：作为触发源的判断依据，图标点击时设为true，F11触发时保持false
2. 修改toggleFullScreen：在触发全屏切换前设置状态标记，明确当前操作的触发源
3. 重构全屏变化处理函数：根据状态标记执行不同逻辑——图标触发时切换纹理并显示图标，F11触发时直接隐藏图标
4. 新增F11按键监听：确保F11触发时状态标记被正确重置，避免异常场景下的判断错误

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