javascript - 使用角度检测点击进入 iframe
问题描述
当用户在弹出窗口之外单击时,我想关闭多选下拉弹出窗口。当用户在 IFrame 之外单击时,它工作正常。但是当用户点击 iframe 弹出窗口时并没有关闭。我正在尝试添加一些补丁代码,但为此我需要检测 iframe 上的点击事件。我看到了太多的例子,但没有得到很好的解决方案。
@HostListener('click', ['$event.target'])
onClick() {
console.log('iframe clicked');
}
我已经尝试过上面的代码,但是 onClick 方法没有在 iframe 点击时调用。
注意:我需要检测每个点击事件,而不仅仅是第一次点击。
解决方案
你可以试试这个 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
我希望它会有所帮助。
推荐阅读
- linux - systemd 将服务添加到 multi-user.target.wants 文件夹仅用作符号链接
- winforms - 项目不会生成,因为它无法加载程序集
- r - 如何仅保留数据框列中所有行的最后 X 个字符
- html - Angular 材质进度条与两个值对齐
- sql-server - 存储过程正确运行,但 DataReader 得到错误结果...有时
- flutter - Flutter - 根据用户文本输入从 API 刷新列表的位置
- css - 如何使用 no-gutter 删除列之间的空间
- html - 用重复的线性渐变改变颜色
- javascript - 如何在 NPM 包中使用 webpack 动态导入?
- apache-flink - Flink 自动/程序化保存点