onbeforeunload 事件不会在浏览器按钮点击时触发，而是在 CMD+R/F5 上工作

Question

我确定我错过了一些相对简单的东西 - 但对于我的生活，我找不到答案。 尝试在react进行重新加载预防时，当我按下浏览器菜单 (Chrome) 中的重新加载按钮时，我的onbeforeunload功能不会触发。 如果我按 CMD+R/F5 并且一旦完成它就可以工作 - 浏览器按钮也会触发该功能。 如果我尝试先单击重新加载，它根本不起作用。 此外，如果我浏览路由器一次，它似乎也注册了。 我正在使用以下代码在我的顶级模板上注册刷新：

class Template extends React.Component {
    constructor(props) {
        super(props);
    }

    refreshPrevent = (e) => {
        e.preventDefault();
        e.returnValue = true;
    }

    componentDidMount() {
        console.log("registering refresh handlers");
        window.addEventListener("beforeunload", this.refreshPrevent );
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.refreshPrevent);
    }

任何想法，将不胜感激。

Answer 1

我在您的代码中没有看到任何错误。 我在我的react应用程序中使用了类似的代码，但在您发布之前我还没有测试过这个特定问题。

根据 MDN 文档，这种行为似乎是正常的：

为了消除不需要的弹出窗口，某些浏览器不会显示在 beforeunload 事件处理程序中创建的提示，除非页面已与该页面交互。 此外，有些根本不显示它们。

因此，当您的应用首次加载时，在您以某种方式与页面交互之前，您可以点击浏览器刷新按钮，并且根据浏览器的不同，页面将重新加载而不显示提示。

但是，一旦您使用鼠标或键盘或通过触摸在页面上完成了某些操作，就会显示提示。

MDN 文档总结（强调）：

还要注意，各种浏览器会忽略事件的结果，根本不要求用户确认。 在这种情况下，文档将始终自动卸载。 Firefox 在 about:config 中有一个名为 dom.disable_beforeunload 的开关来启用此行为。 从 Chrome 60 开始，如果用户自加载后没有在框架或页面中执行手势，则确认将被跳过。

这符合我们应该期望某些情况下的规范，例如未与页面交互加刷新，跳过提示用户：

如果用户代理认为这样做会很烦人、具有欺骗性或毫无意义，则鼓励用户代理避免要求用户进行确认。 一个简单的启发可能是，如果用户没有与文档交互，用户代理在卸载它之前不会要求确认。