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>

如何使用Angular @HostListener在移动iOS上点击外部

2 个答案: