Mobile browser Back button event handling

Question

When i click Mobile browser back button, It should say the confirmation box like

"Are you wants to leave this page"

If the user click "OK" I need to trigger some function.

It's working fine. But when i click "Cancel" it's not staying on the same page. I tried the below code. But am not able to success.

var unloadEvent = function (e) {
    var confirmationMessage = "Are you want to leave this page";
    (e || window.event).returnValue = confirmationMessage; 
    if(confirm(confirmationMessage)) {
      //some JS function
    } else {
       return false;
    }
};
window.addEventListener("beforeunload", unloadEvent);

Please help me to solve this issue. Thanks

Answer 1

You can't modify the default dialogue for onbeforeunload , so your best bet may be to work with it.

window.onbeforeunload = function() {
    //Do some other stuff here..
    return 'You have unsaved changes!';
}

Here's a reference to this from Microsoft:

When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it. The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.

The problem seems to be:

1. When onbeforeunload is called, it will take the return value of the handler as window.event.returnValue .
2. It will then parse the return value as a string (unless it is null).
3. Since false is parsed as a string, the dialogue box will fire, which will then pass an appropriate true / false .

The result is, there doesn't seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue.

Additional notes on jQuery:

• Setting the event in jQuery may be problematic, as that allows other onbeforeunload events to occur as well. If you wish only for your unload event to occur I'd stick to plain ol' JavaScript for it.

• jQuery doesn't have a shortcut for onbeforeunload so you'd have to use the generic bind syntax.

   $(window).bind('beforeunload', function() {} ); 

This answer is suggested by Owen on the question: override onbeforeunload Thanks Owen.