Документ Hostlistener: щелкните не работает должным образом во всплывающем окне на iOS

Question

У меня проблема в моем веб-приложении, когда на iOS всплывающее окно открывается, но щелчок за пределами всплывающего окна не закрывает его. В аналогичных вопросах говорилось, что добавление курсора: указатель на css решит проблему, но, к сожалению, этого не произошло. Однако проблема была решена путем добавления прослушивателя хоста для документа: touchend.

  @HostListener('document:touchend', ['$event'])
  @HostListener('document:click', ['$event'])
  public clickOut(event: { clientY: any; }) {
    let clickPtr = event.clientY;

    //if clickPtr is within these parameter then close popup.
    if (((this.width >= 768 && clickPtr < 120) || (this.width < 768 && clickPtr < 102) || ( this.width === 640 && clickPtr < 118)) && this.popover) {
      this.closePopover();
    } else if (this.popover && this.isSongViewPopOverSelected) {
      this.closePopover();
    }
    this.scroll.addScrollEventListener((e) => {
      this.closePopover();
    });
  }

, чтобы всплывающее окно закрывалось на iOS при нажатии вне всплывающего окна. Теперь я не могу щелкнуть ни одну из ссылок во всплывающем окне. Когда я щелкаю ссылку внутри своего всплывающего окна, оно просто вызывает clickOut (), а не popoverSelected (). Я хочу иметь возможность как щелкнуть вне всплывающего окна, чтобы закрыть его, так и щелкнуть любой элемент внутри него. Поток должен быть popoverSelected () -> clickOut ().

<div class="song-shortmenu-popup">
  <p class="song-shortmenu-item" (click)="popoverSelected('View')">View</p>
  <p class="song-shortmenu-item" (click)="popoverSelected('Share')">Share</p>
</div>

  public popoverSelected(item: String) {
    if (item === 'Share') {
      this.openPopoverShare();
    } else if (item === 'View'){
      this.openPopoverView();
    }
    this.viewCtrl.dismiss(item);
  }