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
}

Answer 3

您可以使用计时器在link unload或reload/user entering a different address unload之间进行区分。这样您就知道在链接点击后直接触发了beforeunload。

使用jQuery的示例：

$('a').on('click', function(){
  window.last_clicked_time = new Date().getTime();
  window.last_clicked = $(this);
});

$(window).bind('beforeunload', function() {
  var time_now = new Date().getTime();
  var link_clicked = window.last_clicked != undefined;
  var within_click_offset = (time_now - window.last_clicked_time) < 100;

  if (link_clicked && within_click_offset) {
    return 'You clicked a link to '+window.last_clicked[0].href+'!';
  } else {
    return 'You are leaving or reloading the page!';
  }
});

（在Chrome中测试）

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

3 个答案: