addEventListener beforeunload 用于提示休假在 React 中不起作用

Question

我正在尝试在用户离开页面时设置提示，我的简单代码是：

useEffect(() => {
    window.addEventListener("beforeunload", (event) => {
      event.preventDefault();
      event.returnValue = "";
      alert("hello");
    });
  }, []);

离开/刷新页面时不会触发任何操作。知道为什么吗？

在 Chrome 和 Safari 上尝试过。

Answer 1

MDN 上的文档说：

在某些情况下（例如，当用户切换选项卡时），浏览器可能不会实际显示对话框，或者可能不会等待用户关闭对话框。

不幸的是，我找不到这些“条件”的更详细解释。但我认为这是为了防止例如当用户查看其他网站时，非活动选项卡显示警报（或提示或确认）。

我认为如果文档具有焦点（？），则会显示警报。例如。尝试单击文档中的某个位置，如果我是对的，则应在重新加载或离开页面时显示警报。

我知道这并不是一个真正的解决方案。我认为这是一种安全机制，无法更改。

但是，如果用户从未单击页面上的任何内容，则可能没有理由显示该警报。不知道是否还有其他情况不显示提醒