How to capture the browser window close event?

by

The beforeunload event fires whenever the user leaves your page for any reason.

For example, it will be fired if the user submits a form, clicks a link, closes the window (or tab), or goes to a new page using the address bar, search box, or a bookmark.

You could exclude form submissions and hyperlinks (except from other frames) with the following code:

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

For jQuery versions older than 1.7, try this:

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

The live method doesn’t work with the submit event, so if you add a new form, you’ll need to bind the handler to it as well.

Note that if a different event handler cancels the submit or navigation, you will lose the confirmation prompt if the window is actually closed later. You could fix that by recording the time in the submit and click events, and checking if the beforeunload happens more than a couple of seconds later.

More Related Contents:

  1. How to capture browser close event?
  2. jQuery Event Keypress: Which key was pressed?
  3. Definitive way to trigger keypress events with jQuery
  4. Trying to detect browser close event
  5. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  6. How to trigger the window resize event in JavaScript?
  7. How do you log all events fired by an element in jQuery?
  8. Jquery: change event to input file on IE
  9. Preventing click event with jQuery drag and drop
  10. Attach an event in a child iframe to a handler in the parent window
  11. Javascript with jQuery: Click and double click on same element, different effect, one disables the other
  12. jQuery: Unbind event handlers to bind them again later
  13. How can I retain the scroll position of a scrollable area when pressing back button?
  14. jQuery prevent change for select
  15. Can I resize the browser window?
  16. Browser back button handling
  17. jQuery event that triggers after CSS is loaded?
  18. Performance difference between jQuery’s .live(‘click’, fn) and .click(fn)
  19. Drop event not firing in chrome
  20. How to check if css value is supported by the browser?
  21. Why web browsers don’t have jQuery built in? [duplicate]
  22. Capture event onclose browser
  23. List all javascript events wired up on a page using jquery
  24. jQuery: How to listen for DOM changes?
  25. Change Height based on Browser Size/Resize
  26. Is it possible to catch browser’s File Open/Save dialog event using Javascript
  27. Unloading/Removing content from an iFrame
  28. Live Detect Browser Size – jQuery / JavaScript
  29. jquery keypress event object keyCode for firefox problem?
  30. How to focus an input field on Android browser through javascript or jquery

Leave a Comment