在子窗口关闭之前阻止父窗口的鼠标或键盘事件

Question

我有一个父窗口和子窗口都打开的场景。我需要阻止用户在父窗口上的鼠标或键盘操作，直到用户关闭子窗口。

父窗口（旧浏览器选项卡）默认打开。在按钮上单击子窗口（新的浏览器选项卡）将打开。

我打开子窗口如下：

 const newwindow = window.open("", "", "width=80%,height=80%");
 newwindow.document.write("Hello");

Answer 1

我认为您可以从 Angular 的 cdk-overlay 如何与模态窗口一起工作中获得启发。

它基本上是一个包装器，它使用一个巨大的 z-index css 属性来获取整个窗口。 然后它将窗口显示为它的第二个孩子 然后您可以处理第一个孩子在窗口中和外部的任何交互 “叠加背景”。

您的 100%/100% 包装区域可以完全不可见并且有一个 pointer-events: none;，它的同级可以是浮动窗口。

在 TypeScript 中完全处理它是可能的，但是 angular 并不关心您是创建复杂的模板还是使用 document.createElement* 和 @HostListener('click', ['$event.target']) public onClick(target) { ... 创建自己的解决方案

Answer 2

您应该使用 stopPropatation

$("#clickable a").click(function(e) {
  e.stopPropagation();
});