如何使用Angular @HostListener在移動iOS上單擊外部

Question

我這樣做，但是在移動iPhone上不起作用。 除了iPhone外，其他任何地方都可以使用

@HostListener('document:click', ['$event.target'])
    public onClick(targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(
            targetElement
        );
       if (!clickedInside && targetElement.className.indexOf('title') === -1) {
           console.log('click outside');
       }

Answer 1

經過一些研究，這應該工作

@HostListener('document:touchend', ['$event'])
@HostListener('document:click', ['$event'])
onClick(event: MouseEvent): void {
  if (this.container.nativeElement.contains(event.target)) {
    // this is inside
  } else {
    // this is outside
  }
}

Answer 2

這種方式適用於iPhone 5，不同之處在於使用了容器變量，該變量是ViewChild對組件中包裝元素的引用

TS：

@ViewChild('container') container;

@HostListener('document:click', ['$event'])
  outClickHandler(event: Event): void {
    if (!this.container.nativeElement.contains(event.target)) {
      console.log('click outside');
    }
  }

和HTML

<div #container>
  ...content
</div>