how to detect if a link was clicked when window.onbeforeunload is triggered?

Question

I have window.onbeforeunload triggering properly. It's displaying a confirmation box to ensure the user knows they are navigating (closing) the window and that any unsaved work will be erased.

I have a unique situation where I don't want this to trigger if a user navigates away from the page by clicking a link, but I can't figure out how to detect if a link has been clicked inside the function to halt the function. This is what I have for code:

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;
}
}

score 7 · Answer 1 · answered Mar 07 '13 at 17:33

7

You're looking for deferred event handling. I'll explain using jQuery, as it is less code:

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;
});

a (very) poor man's implementation without jQuery's convenient delegation handling could look like:

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

this allows all links on your page to leave without invoking the beforeunload handler. I'm sure you can figure out how to customize this, should you only want to allow this for a specific set of links (your question wasn't particularly clear on that).

answered Mar 07 '13 at 17:33

rodneyrehm

13,442
1
40
56

This is great thanks for the reply. I'm trying to use this without jQuery - and I'm trying to figure out how to integrate the poormans implementation but can't seem to figure it out (forgive me, I'm a bit of a JS newb). – mirin Mar 08 '13 at 15:00
Your code was semi-right. I've answered the question with the full answer. – mirin Mar 09 '13 at 16:42
If anyone have problem making it work in IE I had to return undefined instead of null. Works in both ie and chrome. – Janspeed Mar 29 '17 at 06:53
Re your second code block: `this` in that handler will always refer to `document`, which obviously will never be an `a` element. In 2013, you needed a loop starting in `event.target` and stopping at `this` and checking each element in-between. Here in 2018, on really up-to-date modern browsers, you can use the DOM's new `closest` function (which is very like jQuery's): `if (event.target.closest("a"))`... – T.J. Crowder Feb 05 '18 at 07:02

score 5 · Answer 2 · edited Feb 14 '14 at 12:36

5

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
}

edited Feb 14 '14 at 12:36

hlovdal

26,565
10
94
165

answered Mar 09 '13 at 16:46

mirin

111
1
1
4

score 1 · Answer 3 · answered Jul 30 '14 at 13:18

You can differ between a link unload or a reload/user entering a different address unload s by using a timer. This way you know the beforeunload was triggered directly after the link click.

Example using 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!';
  }
});

(tested in Chrome)

how to detect if a link was clicked when window.onbeforeunload is triggered?

3 Answers3

Linked

Related