防止用户在没有确认的情况下离开页面答案

【问题标题】：Prevent user to leave page without the confirmation防止用户在没有确认的情况下离开页面
【发布时间】：2022-10-04 20:33:19
【问题描述】：

我在 StackOverflow 上找到了这个脚本，当用户想要离开页面时，这个脚本会处理这个问题，在这样做之前先问他。

问题

它工作正常（即使可能有更好的解决方案），但我已经意识到它导致了一个“错误”。当用户从表单发送数据并且脚本询问他是否要离开页面（由于重定向）时，它仍然会发送数据。因此，即使用户单击“取消”，它仍将继续执行 store() 方法，并且如果用户添加更多内容并再次发送我得到重复的数据。有没有办法在这个脚本中包含“停止传播”？

代码

    window.onbeforeunload = function () {
        return \'Are you sure you want to close this website?\';
    };

附加问题

由于这个脚本是在 Laravel Livewire 上运行的，所以每次我点击与 livewire 相关的任何按钮（不会将用户重定向到其他页面）时，脚本都会提示弹出窗口询问用户是否确定要离开这页纸。是否有任何解决方法（如果您需要其他代码，请写评论，因为我不确定哪一部分可以帮助您:)）解决这个问题？

如果用户单击yes 离开页面，您必须找到取消请求的方法。
您使用哪个调解器调用 api 获取数据。
请不要让用户确认他们的导航，这真的很烦人。相反，如果您需要保存一些信息，请在用户即将离开页面时向您的服务器发送一条静默 beacon 消息。
@Teemu嗨，我知道你在说什么，但这不是给用户的，它更像是同事的工具，有时他们会在更改保存之前取消错误的窗口。我也讨厌弹出窗口，相信我哈哈哈哈
@Teemu 很好，解决方案听起来不错。如果没有人对我的问题提供“直接”答案，我一定会尝试实现信标：D 听起来很有趣，谢谢！

标签： javascript laravel laravel-livewire

【解决方案1】：

尝试这个：

 <script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

这是一个工作jsFiddle

【讨论】：