移除beforeunload的事件监听器

removing eventlistener for beforeunload

本文关键字：监听器 事件 beforeunload 移除      更新时间：2023-09-26

我正在尝试实现一个弹出(引导模态风格)，将被触发为web访问者离开我的网站。

我尝试了不同的替代方案:

$(window).bind('beforeunload', function(){
$("#sModal").modal('show');
return 'Take our survey before you leave.';
});

但是，它在FF中不起作用，而在IE中工作得很好。我还有另一个问题，"你想离开还是留下"警报显示在任何链接点击我的网站本身，跨所有浏览器类型，因为整个页面正在加载。

我通过循环所有锚标记并添加一个click侦听器来删除beforeunload侦听器来解决这个问题，使用:

window.onload = function () {
    var allLinks = document.getElementsByTagName('a');
    for (var i = 0; i < allLinks.length; i++) {
        allLinks[i].addEventListener("click", removeBeforeUnload, false);
    }
};

removeBeforeUnload函数刚刚使用了

$(window).unbind('beforeunload');

回到实际使popoup/modal出现在所有浏览器上，我使用的代码从这个stackoverflow回答后，我的文档完成加载:

窗口。Onbeforeunload和window。onunload在Firefox, Safari, Opera中不起作用?

这个解决方案在所有浏览器上都能很好地工作，但是现在我不能在任何我的本地点击链接上取消绑定这个事件!

window.removeEventlistener('beforeunload',null,false);
window.removeEventlistener('onbeforeunload',null,false);
window.removeBeforeUnload();
window.onbeforeunload = null;

我希望你能指出我在正确的方向，并解释为什么我不能解绑定这个事件，我从stackoverflow的答案。谢谢!

一个想法是使用全局变量标志，当标志不为真时，不要在卸载事件处理程序中做任何事情。在链接单击处理程序

中设置此标志为null或false

那么你真的不需要删除侦听器

var doUnload = true;
$('a').click(function(){
   doUnload = false;
});
function unloadhandler(){
    if(doUnload){
       // show modal , return message etc
    }else{
       // do nothing , don't return anything
    }       
}

可能jQuery正在添加第二个beforeunload事件监听器，您不能通过DOM API删除相同的方式添加到Window默认

适合你的是:

var allLinks = $('a');
  for (var i = 0; i < allLinks.length; i++) {
    $(allLinks[i]).on('click', () => {
      $(window).off('beforeunload');
      // now add any custom code you want for handling this event
      $("#sModal").modal('show');
    )};
  }
相关文章：