title: Create a JavaScript Function similar to beforeUnload that is triggered when a Link is clicked to show a custom Confirmation Dialog
body: <p>In my Application using JavaScript I have the typical Alert message that is shown if a user tries to leave the page before saving their data.</p>
  
  <p>This is done using the <code>beforeunload</code> Event.  This event only allows you to change and set custom text and nothing more.   I read that some browsers do not even allow your custom text to be used!</p>
  
  <p>So anyways in my application I now have a fancy looking Dialog window that I use throughout the app when I need a user to confirm something.</p>
  
  <p>So ideally I would like my custom Dialog to show when a user tries to leave the page with unsaved changes.  I can even have my AJAX Save button right in the Dialog for the user to save from there!</p>
  
  <p>As we know this simply is impossible it seems using the <code>beforeunload</code> Event.  </p>
  
  <p>So I came up with another plan, instead of simply giving up and saying it's impossible like every single StackOverflow question and blog post on the matter did and said, I prefer to venture past that because I know it can be done!</p>
  
  <p>I have an idea of how to do it and then after my idea came, I found a site that actually does it already!  <strong>Facebook</strong></p>
  
  <p>So in my app I have a Global JavaScript variable<code>var unsavedChanges = false;</code>  Now anytime a change is made on the page for the Form fields and actions that I say constitute a "Change", I then will set <code>var unsavedChanges = true;</code> when that happens on these items.</p>
  
  <p><code>unsavedChanges</code> is how I determine to show or not to show my <code>beforeunload</code> event alert.</p>
  
  <p>So using this same variable, instead of simply showing the <code>beforeunload</code> event alert, I would like to also use it in another event.</p>
  
  <p>I would like to set a <code>click</code> event on all my links.  So anytime a link is clicked in my app, it will check <code>unsavedChanges</code> and if <code>true</code>, I will show my own custom jQuery Dialog window.  It will have a Save button inside it to save the content and a button to cancel and one to continue on to there desired destination.  It should also set <code>unsavedChanges</code> to <code>false</code> which will hopefully prevent the <code>window.beforeunload</code> event from firing directly after.</p>
  
  <p>Now I mentioned that Facebook seems to do exactly what I just outlined or at least very similar on there Messages page.</p>
  
  <h2>Exit by Link Click</h2>
  
  <p>Here is a screenshot of that in action when a <strong>LINK is clicked</strong>....</p>
  
  <p><img src="https://i.stack.imgur.com/NZgnO.png" alt="enter image description here"></p>
  
  <h2>Exit by Non-Link Click</h2>
  
  <p>Now when you bypass the Link click and try to Close window or enter a new URL in address bar, basically any other sort of Page Exit that is not a link click, it then falls back to the default browser behavior for the <code>beforeunload</code> event </p>
  
  <p><img src="https://i.stack.imgur.com/Nr9Kj.png" alt="http://i.imgur.com/KfpdbFS.png"></p>
  
  <p>So what I described above seems to be possible if you look at what Facebook is doing, it seems like how I outlined is an achievable way of doing this.  Obviously you lose the Non-Link click exit custom Dialog support but it never existed anyway so no loss there and you are adding support for it on all link clicks, that is awesome!</p>
  
  <p>Now I have the idea for this but I don't know exactly how to code it up working 100% and I need help.</p>
  
  <p>For example some issues that I do not know how to deal with...</p>
  
  <ul>
  <li>If a link is clicked and it already has a click event on that link, then how do we use this new click event and also use the existing click event?</li>
  <li>Some links might not warrant this behavior.  If I have a link that has a click event on it already and that event does something like remove an item or add an item to page, then it is not even trying to leave the page in the first place so it should not show the Dialog!  So there needs to be some type of way to set a link to not have this functionality.  Also perhaps it could by default NOT be set on links that have no link in them. <code>&lt;a href=""&gt;</code> or  <code>&lt;a href="#"&gt;</code> or <code>&lt;a href="#targetName"&gt;</code> these should obviously not have the click event on them!</li>
  </ul>
  
  <p>So this is all an idea at this point that I now see Facebook has in action somehow!  I would love to hear more ideas, thoughts, anything related to the matter.  This would make a really good blog posts if a good solution comes out of this questions as hundreds of people seem to really want this functionality and I know I have for years now myself.</p>