Angular 4(或纯JavaScript)解决方案在显示对话框时阻止用户输入?

Question

我正在Angular 4中开发一个安全敏感的(支付(应用程序。 系统具有不活动的超时条件。当达到超时时，应该会弹出一个对话框，告诉用户她由于不活动而需要重新登录。

显示对话框时，用户可能会右键单击以打开上下文菜单并离开对话框。密钥输入也是如此。

因此，我像这样禁用了两者(仅在对话框显示时(：

window.oncontextmenu = function() { return false };
window.onkeydown = function() { return false };

这工作正常，并在对话框显示时阻止任何导航。

但是，我想防止一种解决方法： 如果在弹出超时对话框之前打开上下文菜单，则该上下文菜单在对话框处于活动状态时保持活动状态，并允许用户导航离开(选择返回或重新加载(。

有没有办法关闭对话框组件中的打开上下文菜单？ 或者任何其他方法可以防止这种情况(完全阻止上下文菜单(？ 显然，我无法禁用鼠标事件，否则用户永远无法激活超时对话框中的按钮。

Answer 1

在 Angular 2+ 中，您可以捕获任何事件，例如：

<div (anyEventName)="whateverEventHandler($event)">
</div>

请注意，$event 是可选的，函数的返回是事件处理程序的返回，因此，您可以返回 false; 以避免事件的默认浏览器操作。

在您的情况下，事件名称是上下文菜单。因此，您的代码可以是这样的：

app.component.html：

<div (contextmenu)="onRightClick($event)">
Right clicked
{{nRightClicks}}
time(s).
</div>

app.component.ts'

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div (contextmenu)="onRightClick($event)">
Right clicked
{{nRightClicks}}
time(s).
</div>
`,
// Just to make things obvious in browser
styles: [`
div {
background: green;
color: white;
white-space: pre;
height: 200px;
width: 200px;
}
`]
})
export class App {
nRightClicks = 0;
constructor() {
}
onRightClick() {
this.nRightClicks++;
return false;
}
}

这是一个完整的工作示例： https://stackblitz.com/edit/angular-7c7nvf