如何在表单提交时禁用beforeunload事件触发的离开页面提示弹窗

错误原因 #

你之前的实现逻辑存在两处核心问题：

1. $(window).on('beforeunload.edit-post').preventDefault()写法不符合jQuery的API规范：on方法的作用是绑定事件监听器，而非获取已绑定的事件回调，preventDefault()是事件对象的方法，不能直接在on方法的返回值上调用，自然不会生效。
2. beforeunload的弹窗触发规则是：只要事件回调返回非undefined/非null的真值，浏览器就会弹出离开确认窗，要避免提交表单时触发弹窗，只需要在提交前移除你绑定的对应beforeunload监听器即可。

解决方法 #

因为你绑定beforeunload事件时使用了.edit-post的jQuery事件命名空间，可以直接通过命名空间精准移除你绑定的这个监听，不会影响页面上其他可能存在的beforeunload逻辑，修正后的代码如下：

<script>
function submit() {
    // 移除命名空间为edit-post的beforeunload事件监听
    $(window).off('beforeunload.edit-post');
    $("#form").submit();
}

// 原来的页面离开提醒绑定逻辑保留
$(window).on( 'beforeunload.edit-post', function() {return true;});
</script>

<form id="form">
    <input name="example" value="example">
</form>

<button onclick="submit()">Submit</button>

如果你是用AJAX提交表单、提交后页面不会刷新跳转，还可以在提交完成后重新绑定beforeunload监听，恢复离开页面提醒的能力：

function submit() {
    // 临时移除监听
    $(window).off('beforeunload.edit-post');
    $.ajax({
        url: '你的表单提交接口地址',
        type: 'POST',
        data: $('#form').serialize(),
        success: function (res) {
            // 提交完成后重新绑定监听，恢复离开提醒能力
            $(window).on( 'beforeunload.edit-post', function() {return true;});
            // 你的其他提交成功逻辑
        },
        error: function () {
            // 提交失败也可以重新绑定监听
            $(window).on( 'beforeunload.edit-post', function() {return true;});
        }
    })
}

内容的提问来源于stack exchange，提问作者user16071820