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

2022-01-20 00:00:00 popup javascript

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

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 ?

推荐答案

我建议捕获表单的提交事件，然后从 onbeforeunloadconfirmExit 函数> 事件绑定或者设置一个标志来表示页面可以提交.例如:

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.

相关文章