使用角度检测点击进入 iframe答案

【问题标题】：detect click into iframe using angular使用角度检测点击进入 iframe
【发布时间】：2019-08-01 13:06:40
【问题描述】：

当用户在弹出窗口之外单击时，我想关闭多选下拉弹出窗口。当用户在 IFrame 之外单击时，它工作正常。但是当用户点击 iframe 弹出窗口时并没有关闭。我正在尝试添加一些补丁代码，但为此我需要检测 iframe 上的点击事件。我看到了太多的例子，但没有得到很好的解决方案。

 @HostListener('click', ['$event.target'])
  onClick() {
    console.log('iframe clicked');
 }

我已经尝试了上面的代码，但是 onClick 方法没有在 iframe 点击时调用。

注意：我需要检测每个点击事件，而不仅仅是第一次点击。

【问题讨论】：

你不能。该事件发生在 iframe 窗口实例内，而不是在父窗口中

标签： javascript angular typescript iframe primeng

【解决方案1】：

你可以试试这个 Angular 指令：

import {
  Directive,
  ElementRef,
  OnInit,
  Renderer2,
  Input,
  Output,
  EventEmitter,
  HostListener
} from '@angular/core';

@Directive({
  selector: '[appIframeTracker]'
})
export class IframeTrackerDirective implements OnInit {
  private iframeMouseOver: boolean;

  @Input() debug: boolean;

  @Output() iframeClick = new EventEmitter<ElementRef>();

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    this.renderer.listen(window, 'blur', () => this.onWindowBlur());
  }

  @HostListener('mouseover')
  private onIframeMouseOver() {
    this.log('Iframe mouse over');
    this.iframeMouseOver = true;
    this.resetFocusOnWindow();
  }

  @HostListener('mouseout')
  private onIframeMouseOut() {
    this.log('Iframe mouse out');
    this.iframeMouseOver = false;
    this.resetFocusOnWindow();
  }

  private onWindowBlur() {
    if (this.iframeMouseOver) {
      this.log('WOW! Iframe click!!!');
      this.resetFocusOnWindow();
      this.iframeClick.emit(this.el);
    }
  }

  private resetFocusOnWindow() {
    setTimeout(() => {
      this.log('reset focus to window');
      window.focus();
    }, 100);
  }

  private log(message: string) {
    if (this.debug) {
      console.log(message);
    }
  }
}

当我们点击 IFrame 时它会发出一个输出事件。

来源：https://gist.github.com/micdenny/db03a814eaf4cd8abf95f77885d9316f

我希望它会有所帮助。

【讨论】：

根据我的理解，每次鼠标悬停在 iframe 上时它都会调用。但就我而言，我需要在点击事件时关闭多选弹出窗口。