离开页面时弹出Js，但在提交表单时不弹出 [英] Js popup when leaving page but not when submitting form

问题描述

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

I use this code on my website to display a warning message in a popup when a user trie to leave the page:

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

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

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

However, this is on a page with a form. When the user submits the form, the popup appears which doesn't make sense. How can I modify this code so the popup appears only when the user leaves the page in every way possible (close the tab, clicks on site logo, refresh the page) but not when submitting the form ?

推荐答案

我建议捕获表单的提交事件，然后删除 confirmExit 来自 onbeforeunload 事件绑定的功能或设置一个标志以指示可以提交页面。例如：

I would suggest capturing the submit event for the form and then either removing the confirmExit function from your onbeforeunload event binding or setting a flag to indicate that the page can be submitted. For example:

<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 一般情况下绑定事件的方法，但是考虑到你的例子，我试图保持我的答案一致。

I'd recommend you consider using the addEventListener method for binding events in general, however given your example I've tried to keep my answer consistent.

这篇关于离开页面时弹出Js，但在提交表单时不弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！