How can I get the destination url of a link on the web page in the Javascript onbeforeunload event?

Question

Is it possible to capture what link on the web page the user clicked on? Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.

This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.

They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.

I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.

I am using JQuery & Javascript.

Answer 1

This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.

I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.

$('body a').click(function(e) {     
    //if link is reference to page element
    if ($(this).attr('href').charAt(0)=="#") {
        return;
    }

     //check if link is to same window    
     var pathname = window.location.pathname;
     var pathname2 = $(this).attr('href');
     pathname2 = pathname2.replace(/^.+\.\//, '');
     if (pathname.indexOf(pathname2) >= 0) {
        //link clicked is contained on same page
        //prevent page from getting reloaded & losing data
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();    
        return;     
    }

    //link clicked on is another page
    if (hasMerchandise) {  //var to indicate user has items on order form       
        //give user options: leave page, open link in other page, stay, etc.
        // $('.popupForm-handleExitRequest').click();   //roll your own code    

        //prevent page from getting reloaded & losing data
        //in case user wants to cancel page change or open link in another window
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();            
    } else {
        //load new page
        $(this).removeAttr('target');
    }       
});

Answer 2

Instead of having a completely different set of headers/footers you could replace all links in certain areas with links that open in a new window like so:

$('#header a, #footer a').each(function() {
  $(this).attr('target', '_blank');
});