How to prevent navigation by browser buttons but not by links?

Question

I want warn users if they leave the page by closing the browser or using the history buttons of the browser using the following JavaScript:

window.onbeforeunload = function(e) {
    return 'Ask user a page leaving question here'; 
};

But my links and buttons on my website should work regardless of this. How can I achieve that?

Answer 1

The first way that comes to mind is to set a variable that tells you whether a link was clicked:

var linked = false;

window.onbeforeunload = function(e) {
    if (!linked)
        return 'Ask user a page leaving question here'; 
};

document.addEventListener('click', function(e) {
    if (e.target.tagName === "A")
        linked = true;
}, false);

That is, set a click event handler at the document level, that tests whether the clicked element was an anchor (or whatever else you want to allow) and if so sets the variable. (Obviously this assumes that you don't have other anchor element click handlers at a lower level that stop event propagation.)

Answer 2

var linkClicked = false;
window.onbeforeunload = function(e) {
    if (!linkClicked){
        linkClicked = false;
        return 'Ask user a page leaving question here'; 
    }
};

$(document).ready(function(){
    $('a').click(function(e){
        linkClicked = true;
    });
});

Obviously this relies on JQuery to add the event handler to all links, but you could attach the handler with any other method, including adding onclick="linkClicked=true;" to every link on the page if you really have to.

Edit:

Just want to point out that if the user clicks a link that doesn't redirect them (e.g. a hashtag link to somewhere else on the page, or something that returns false / prevents the default action being executed) then this will set linkClicked to true and subsequently any browser based navigation won't be caught.

If you want to catch this, I would advise setting a timeout on the link click like so:

$(document).ready(function(){
    $('a').click(function(e){
        linkClicked = true;
        setTimeout(function(){
            linkClicked = false;
        }, 500);
    });
});

This will allow half a second for the window unload event to trigger before resetting the flag so that future navigation events are caught correctly. This still isn't perfect, but it probably doesn't need to be.

Answer 3

You can use the window.onbeforeunload event.

var check= false;

window.onbeforeunload = function () {
   if (!check) {
   return "Are you sure you want to leave this page?"
   }
}

function CheckBackButton() {
    check= true;
} 



referenceElement.addEventListener('onClick', CheckBackButton(), false);

Answer 4

Us a confirmation prompt no? like this? Intercept page exit event

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

Answer 5

How to show the “Are you sure you want to navigate away from this page?” when changes committed? this may solve your problem How