离开页面时提交JS，但提交表单时不弹出

Question

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

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

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

但是，这是在带有表单的页面上。 当用户提交表单时，会弹出没有意义的弹出窗口。 我如何修改此代码，以便仅当用户以各种可能的方式离开页面时（关闭选项卡，单击网站徽标，刷新页面），而在提交表单时才显示弹出窗口？

Answer 1

我建议捕获表单的confirmExit事件，然后从onbeforeunload事件绑定中删除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方法来绑定事件，但是考虑到您的示例，我尝试使答案保持一致。