删除 beforeunload 的事件监听器答案

【问题标题】：removing eventlistener for beforeunload删除 beforeunload 的事件监听器
【发布时间】：2016-09-28 18:38:28
【问题描述】：

我正在尝试实现一个弹出窗口（引导模式样式），该弹出窗口将在网络访问者离开我的网站时触发。

我尝试了以下不同的替代方案：

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

但是，它在 FF 中无法运行，而在 IE 中运行良好。我还遇到了另一个问题，即“你想离开还是留下”警报会显示在我网站本身的任何链接点击上，在所有浏览器类型中，当整个页面正在加载时。

我通过遍历我的所有锚标记并添加一个点击侦听器来删除 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');

回到实际使弹出窗口/模态出现在所有浏览器上，我在文档完成加载后使用了此 stackoverflow 答案中的代码：

window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?

此解决方案适用于所有浏览器，但现在我无法在任何本地点击链接上取消绑定此事件！我什么都试过了

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

我希望你能指出我正确的方向并解释为什么我无法取消绑定这个事件，这是我从 stackoverflow 答案中使用的。谢谢！

【问题讨论】：

尽管我很讨厌你使用卸载事件模式，但这是一个很好的问题，因为我在尝试捕获浏览器上的关闭事件而不捕获刷新、返回等时遇到了同样的问题。
@SterlingArcher 谢谢！我希望我能解决这个问题，因为我正处于桌面阶段！我不知道为什么事件监听器没有被注销！？
我建议坚持使用 jQuery 风格的 bind/unbind（实际上在更新的 jQuery 版本中应该是 on/off），或者简单的 DOM 风格的 addEventListener/removeEventListener 语义。将两者结合会导致疯狂:)。
你可能想看看这个：developers.google.com/web/updates/2018/07/…

标签： javascript jquery addeventlistener onbeforeunload

【解决方案1】：

一种想法是使用全局变量标志，并且当标志不真实时，不要在卸载事件处理程序中做任何事情。在链接点击处理程序中将此标志设置为 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
    }       
}

【讨论】：

此解决方案在 IE 上非常有效，其中内部网站链接已清理，弹出窗口仅在退出/关闭时显示，但在 FF 中，内部链接已清理，但在退出/关闭时“你想离开此站点”警报停止一起显示...弹出窗口仅在重定向或关闭之前显示毫秒...
内部链接被清理是什么意思？
这意味着，点击内部网站链接时，它们不会触发弹出窗口
我以前做过这个，我记得在 IE 中返回 false 或 null 是个问题，但我认为在其他浏览器中工作......我只是不记得我是如何设置它的跨度>
可能有这方面的库，因为现在当你模糊窗口或试图离开时弹出东西真的很常见

【解决方案2】：

可能 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');
    )};
  }

【讨论】：