如何在触发window.onbeforeunload时检测链接是否被点击？

Question

我有window.onbeforeunload正确触发.它显示一个确认框,以确保用户知道他们正在导航(关闭)窗口,并且任何未保存的工作都将被删除.

我有一个独特的情况,如果用户通过单击链接导航离开页面,我不希望这触发,但我无法弄清楚如何检测是否已在函数内单击链接以停止该功能.这就是我对代码的看法:

window.onbeforeunload = function() {
var message = 'You are leaving the page.';

/* If this is Firefox */
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
  if(confirm(message)) {
    history.go();
  } 
  else {
    window.setTimeout(function() {
      window.stop();
    }, 1);
  }
}
/* Everything else */
else {
  return message;
}
}

Answer 1

您正在寻找延期事件处理.我将解释使用jQuery,因为它是更少的代码:

window._link_was_clicked = false;
window.onbeforeunload = function(event) {
  if (window._link_was_clicked) {
    return; // abort beforeunload
  }
  // your event handling
};

jQuery(document).on('click', 'a', function(event) {
  window._link_was_clicked = true;
});

没有jQuery方便的委托处理的(非常)穷人的实现可能看起来像:

document.addEventListener("click", function(event) {
  if (this.nodeName.toLowerCase() === 'a') {
    window._link_was_clicked = true;
  }
}, true);

这允许页面上的所有链接离开而不调用beforeunload处理程序.我确定你可以弄清楚如何自定义这个,如果你只想在特定的一组链接中允许这个(你的问题并不是特别清楚).

Answer 2

var link_was_clicked = false;
document.addEventListener("click", function(e) {
  if (e.target.nodeName.toLowerCase() === 'a') {
    link_was_clicked = true;
  }
}, true);

window.onbeforeunload = function() {
  if(link_was_clicked) {
    link_was_clicked = false;
    return;
  }
  //other code here
}