Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

javascript

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;
}
}
like image 602
mirin Avatar asked Mar 07 '13 17:03

mirin


People also ask

What does it mean when someone clicks on a link?

A click on a link is a good indication of engagement. It means someone saw your content and decided to find out more or investigate further. You can track these clicks on all major platforms, using the tools they provide.

Does onbeforeunload trigger before or after the dialog?

well, the weird this is that ANY JavaScript will actually trigger in this anonymous onbeforeunload function. And it will trigger before the dialog, even though the code is afterwards.

When the user clicks on the link in the report420 link?

When the user clicks on the link with the ID of report420 the function continueScript is called, from there you can do anything you want. Note that the function is passed to addEventListener without an parenthesis to stop the function being called at that point. Show activity on this post.

Should you track the clicks on all your links?

Tracking the clicks on all your links depends on the analytics available in every channel you use. The information you gather from these tools can help you make better marketing decisions for your company or brand, but it’s important to know what information matters from which channel to ensure success.


1 Answers

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).

like image 188
rodneyrehm Avatar answered Sep 19 '22 22:09

rodneyrehm