如何防止用户通过扩展程序与网页交互？

Question

我正在创建一个扩展，它应该显示一个叠加层并突出显示光标所在的元素。当覆盖可见时，用户不应该能够与页面交互（按钮、链接等不应该工作）。

代码：

let overlay = document.createElement("div");
overlay.setAttribute("class", "as-overlay");

let panel = document.createElement("div");
panel.setAttribute("class", "as-root");
panel.setAttribute("id", "as-panel");
overlay.appendChild(panel);
document.body.appendChild(overlay);

____

.as-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom:0px;
  z-index: 99999;
  cursor: default;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0.8);
}

我将指针事件设置为无以禁用交互。但它不起作用。难道我做错了什么？ （我已经确保叠加层具有完整的宽度和高度，并且它的 z-index 足够高，因此它可以呈现在所有内容之上。）

一些帮助将不胜感激，我已经为此苦苦思索了很长一段时间，并且某种大型语言模型没有帮助;-;

Answer 1

对于初学者来说，这两个必须切换，因为如果没有“覆盖”就不能放置“面板”。即使 JS 允许你这样做，这也很不合逻辑，很伤我的脑子！

overlay.appendChild(panel);
document.body.appendChild(overlay);

但是无论如何，如果你已经用“裹尸布”覆盖了整个页面那么谁会关心指针事件呢？ :)

他们会点击你的裹尸布，所以如果你没有在上面添加点击事件......到底是什么问题？