javascript - 离开页面时弹出Js，但提交表单时不弹出

Question

当用户尝试离开页面时，我在网站上使用此代码在弹出窗口中显示警告消息:

<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {

    return "Si vous quittez ou actualisez la page, vous perdrez votre tutoriel";
  }
</script>

但是，这是一个带有表单的页面。当用户提交表单时，会出现没有意义的弹出窗口。如何修改此代码，以便仅当用户以各种可能的方式离开页面(关闭选项卡、单击站点 Logo 、刷新页面)时才出现弹出窗口，而不是在提交表单时出现？

Answer 1

我建议捕获表单的提交事件，然后从 onbeforeunload 事件绑定(bind)中删除 confirmExit 函数，或者设置一个标志来指示该页面可以已提交。例如:

<script type="text/javascript">

    // Define flag to determine if the page can be left without confirmation
    var safeToLeave = false;

    // Handle user leaving the page
    function handleExit () {
        if (!safeToLeave) {
            return 'Si vous quittez ou actualisez la page, vous perdrez votre tutoriel';
        }
    }

    // Handle the user submitting the page form
    function handleSubmission() {
        safeToLeave = true;
    }

    // Bind to on evemts
    window.onbeforeunload = handleExit;
    document.getElementById('#my-form').onsubmit = handleSubmission;

</script>

我建议您考虑使用 addEventListener 方法来绑定(bind)一般事件，但是鉴于您的示例，我已尽力保持答案一致。