<p>I have a page which does quite a bit of work and I don't want the user to be able to navigate away from that page (close browser, hit back button, etc.) without getting a warning. I found that the onbeforeunload event (which I think is IE-specific, which works fine for me as the project uses lots of ActiveX) works great.</p>

<p>Problem is, I want the user to be able to click on a little "help" icon in the upper-right corner and pop up a help window at any time. This causes onbeforeunload to fire, even though the main window never goes anywhere and the page never unloads. </p>

<p>The JavaScript function that runs when the onbeforeunload event runs just puts text into event.returnValue. If I could ascertain, somehow, that the help icon is the one that was clicked then I could just not put text into event.returnValue in that situation. But how could I have the page figure that out?</p>

[{'answer_id': 57798, 'author': 'Tom Kidd', 'author_id': 2577, 'author_profile': 'https://Stackoverflow.com/users/2577', 'pm_score': 2, 'selected': False, 'text': '<p><strong>EDIT:</strong> My "workaround" below is complete overkill, based on my lack of understanding. Go with Shog9\'s answer above.</p>\n\n<p>OK so while I was writing the question, I came up with a workaround which will work for now.</p>\n\n<p>I put a global JavaScript variable in act as a boolean on whether or not the icon is being hovered over. Then, I attach events to the image\'s onmouseover and onmouseout events and write functions that will set this value. Finally, I just code in the function that handles onbeforeunload that will check this value before setting event.returnValue.</p>\n\n<p>Probably not a flawless workaround but it will work for now.</p>\n'}, {'answer_id': 57827, 'author': 'Shog9', 'author_id': 811, 'author_profile': 'https://Stackoverflow.com/users/811', 'pm_score': 4, 'selected': True, 'text': '<p>Let me guess: the help "icon" is actually a link with a <code>javascript:</code> url? Change it to a real button, a real link, or at least put the functionality in an onclick event handler (that prevents the default behavior). Problem solved.</p>\n\n<pre><code>&lt;!-- clicking this link will do nothing. No onbeforeunload handler triggered. \nNothing. \nAnd you could put something in before the return false bit...\n...and the onunload handler would still not get called... --&gt;\n&lt;a href="http://www.google.com/" onclick="return false;"&gt;blah1&lt;/a&gt;\n&lt;!-- this should also do nothing, but IE will trigger the onbeforeunload \nhandler --&gt;\n&lt;a href="javascript:void(0)"&gt;blah2&lt;/a&gt;\n</code></pre>\n'}, {'answer_id': 221423, 'author': 'Kevin Dark', 'author_id': 26151, 'author_profile': 'https://Stackoverflow.com/users/26151', 'pm_score': -1, 'selected': False, 'text': '<p>I have a method that is a bit clunky but it will work in most instances.</p>\n\n<p>Create a "Holding" popup page containing a FRAMESET with one, 100% single FRAME and place the normal onUnload and onbeforeUnload event handlers in the HEAD.</p>\n\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n&lt;script language="Javascript" type="text/javascript"&gt;\n  window.onbeforeunload = exitCheck;\n  window.onunload = onCloseDoSomething;\n\n  function onCloseDoSomething()\n  {\n  alert("This is executed at unload");\n  }\n\n  function exitCheck(evt)\n  {\n  return "Any string here."}\n  &lt;/script&gt;\n  &lt;/head&gt;\n\n    &lt;frameset rows="100%"&gt;\n    &lt;FRAME name="main" src="http://www.yourDomain.com/yourActualPage.aspx"&gt;\n    &lt;/frameset&gt;\n&lt;body&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>Using this method you are free to use the actual page you want to see, post back and click hyperlinks without the outer frame onUnload or onbeforeUnload event being fired.</p>\n\n<p>If the outer frame is refreshed or actually closed the events will fire.</p>\n\n<p>Like i said, not full-proof but will get round the firing of the event on every click or postback.</p>\n'}, {'answer_id': 415369, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>on the internet you will find many people suggesting you use something like</p>\n\n<p>window.onbeforeunload = null</p>\n\n<p>but this does not work for me in IE6.  reading up in the MSDN docs for the event object i found a reference to the event.cancelBubble property, which i thought was the solution. but thanks to Orso who pointed out that setting "event.cancelBubble=true" is useless, the way to get rid of the confirm prompt is to exclude the return statement altogether, i chose to use a boolean variable as a flag to decide whether to return something or not. in the example below i add the javascript code programattically in the code behind:</p>\n\n<pre><code>Page.ClientScript.RegisterStartupScript(typeof(String), "ConfirmClose", @"  &lt;script&gt;        window.onbeforeunload = confirmExit;        function confirmExit()      {           if(postback == false)               return ""Please don\'t leave this page without clicking the \'Save Changes\' or \'Discard Changes\' buttons."";                                                      }       &lt;/script&gt;");\n</code></pre>\n\n<p>then the help button contains the following aspx markup:</p>\n\n<pre><code>OnClientClick="postback=true;return true;\n</code></pre>\n\n<p>this sets the \'postback\' variable to true, which gets picked up in the confirmExit() function, having the effect of cancelling the event.  </p>\n\n<p>hope you find this useful.  it is tested and works in IE6 and FF 1.5.0.2.</p>\n'}]
['https://Stackoverflow.com/questions/57791', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2577/']