JavaScript/Angular点击画廊外区域关闭时全屏无法退出问题求解

问题根因 #

• 核心错误在closeFullScreen方法：你没有直接执行退出全屏逻辑，而是在方法内给document绑定了新的点击事件，所以调用该方法时不会立刻退出全屏，要等下一次点击才会触发退出逻辑。
• 模板存在重复ID：embed和img标签都用了id="imgAnexo"，document.getElementById只会返回第一个匹配元素，导致点击区域判断逻辑失效。
• 关闭按钮的点击事件语法错误：(click)="onCloseAttachment().document.getElementById('lightbox')"是无效写法，会引发运行时异常。

修正后的实现代码 #

TypeScript 部分 #

openModalAttachment(template: TemplateRef<any>, index: number) {
  this.index = index;
  this.getFile(index);
  this.modalRef = this.modalService.show(template);
  this.openModalAnexo = true;
  this.fullScreen();
  // 绑定全局点击事件判断是否点击外部
  document.addEventListener('click', this.handleOutsideClick.bind(this));
}

handleOutsideClick(event: MouseEvent) {
  if (!this.openModalAnexo) return;
  // 判断点击的是否是模态框内部元素
  const modalInner = document.querySelector('.modalOpenGaley');
  if (modalInner && !modalInner.contains(event.target as Node)) {
    this.onCloseAttachment();
  }
}

onCloseAttachment() {
  this.message = 'Declined!';
  this.index = -1;
  this.modalRef?.hide();
  this.openModalAnexo = false;
  this.closeFullScreen();
  // 移除全局点击事件避免内存泄漏
  document.removeEventListener('click', this.handleOutsideClick.bind(this));
}

closeFullScreen() {
  if (document.fullscreenElement) {
    document.exitFullscreen()
      .then(() => console.log('已退出全屏模式'))
      .catch((err) => console.error('退出全屏失败:', err));
  }
}

fullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
      .catch(err => console.error('进入全屏失败:', err));
  }
}

模板部分 #

<img src="/assets/icons/eysblue.svg" class="openAtchament" (click)="openModalAttachment(attachment, j)"
                *ngIf="collapseData.label == 'ANEXOS'">

<ng-template #attachment >
  <div class="" id="myModal">
    <div class="modal-content">
      <div class="modalOpenGaley">
        <span class="close" (click)="onCloseAttachment()">&times;</span>
        <!-- 移除重复ID，用类名区分 -->
        <embed [src]="file" #files class="files-images-pdf img-anexo"
        type="application/pdf">
        <img [src]="file" class="files-images-pdf img-anexo" />
        <div id="caption"></div>
      </div>
    </div>
    </div>
</ng-template>

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