Javascript onbeforeunload事件不是在浏览器按钮单击时触发，而是在CMD+；R/F5

我肯定我错过了一些相对简单的东西——但就我的一生而言，我找不到答案。当尝试在

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);
    }

---

如果您有任何想法，我们将不胜感激。

我看不到您的代码中有任何错误。我在我的

react

应用程序中使用了类似的代码，但在您发布之前，我没有测试过这个特定的问题

这种行为似乎很正常：

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

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

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

MDN文档总结（添加强调）：

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

这意味着我们应该期望在某些情况下，如页面加刷新时不被打断，跳过提示用户：

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

---

谢谢你-我甚至没有想过要检查规范，我以为我错过了代码中的一些东西。任何单击都会将事件设置为活动，我会将测试用例标记为无效，并创建一个新的测试用例，在重新加载之前需要一些页面交互。再次感谢！