禁用链接的onbeforeunload事件

Question

如何禁用链接的onbeforeunload事件？

var show = true;

function showWindow(){
    if(show){      
        alert('Hi');
        return "Hi Again";
    }
}


$('a').click(function(){

    show = false;

});


window.onbeforeunload = showWindow;

这是我拥有的代码，但当我点击“a”元素时它仍然显示。

按钮代码：

<button type="submit" class="submitBtn"><span>Open Account</span></button>

- dzm

Answer 1

不是使用

show = false;

尝试

window.onbeforeunload = null;

这将简单地从事件中解除函数的绑定。

- JustcallmeDrago

---

很好，这对于链接起作用了 - 但是对于按钮却没有。 - dzm

尝试在你的jQuery点击事件处理程序中的第一行代码添加一个alert()。如果你的“hi”提示框出现在你的新提示框之前，那么这意味着onbeforeunload事件在按钮点击处理程序之前触发。这是真的吗？ - JustcallmeDrago

没错，它在按钮点击处理程序之前触发了onbeforeunload。 - dzm

你可以为提交按钮添加一个mouseDown处理程序，该处理程序解除绑定onbeforeunload事件，并将mouseup事件绑定到文档上，以便在mouseup目标不是按钮时重新绑定函数到onbeforeunload。这样，如果mousedown和up（===click）都在按钮上，则不会触发onbeforeunload，否则一旦鼠标在其他位置被松开，一切就会恢复正常。 - JustcallmeDrago

我仍在努力弄清楚如何有条件地抑制此“离开/留下”提示。换句话说，如果表单是脏的，则允许提示出现，否则绕过它。有什么想法可以实现这一点吗？ - PongGod

Answer 2

我刚遇到了同样的问题，并找到了一个非常简单的解决方案：

$("a").mousedown(function() {
    $(window).unbind();
});

在触发点击事件之前，这将删除onbeforeunload事件。

- Ginchen

---

不知道为什么，但这是唯一对我起作用的解决方案。我正在WordPress上开发自定义文章类型，并需要在用户点击WP“更新”按钮时进行一些处理，然后使用JS提交表单。我尝试过window.onbeforeunload = null;但那并没有起作用。这个方法起作用了。谢谢！ - cmpreshn

因为 mousedown 在 beforeunload 之前运行，而 click 在其之后运行。我仍然建议使用 JustcallmeDrago 的解决方案，同时将链接的 click 事件替换为 mousedown。 - oriadam

Answer 3

使用以下代码解除事件绑定：

javascript:window.onbeforeunload=function(){null}

- qasimzee

Answer 4

由于某些原因，使用 window.onbeforeunload = null 对我没有起作用。

相反，解决问题的方法是相应地添加和移除监听器：

let onBeforeUnloadListener;

// Mounting
window.addEventListener('beforeunload', onBeforeUnloadListener = ev => {
  ev.preventDefault();
  ev.returnValue = 'Any';
});

// Unmounting
window.removeEventListener('beforeunload', onBeforeUnloadListener);

这个想法是因为使用了getEventListeners(window)而产生的，它显示了活动的beforeunload监听器。

- Andrei Gătej