{"id":2442,"date":"2015-04-29T13:18:27","date_gmt":"2015-04-29T13:18:27","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=2442"},"modified":"2015-04-29T13:18:27","modified_gmt":"2015-04-29T13:18:27","slug":"solving-close-browser-tab-event-issue","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/solving-close-browser-tab-event-issue\/","title":{"rendered":"Solving the close browser \/ tab event issue"},"content":{"rendered":"<p>Anyone who has ever attempted to leverage the <em>onbeforeunload<\/em> or <em>unload<\/em> JavaScript events to detect when the browser window is closed becomes instantly disappointed to find that those events also fire when navigating to a new page.<\/p>\n<p>I have a solution that is not fool-proof, but it&#8217;s a step in the right direction, and less complicated than solutions that rely on the &#8220;<a href=\"http:\/\/ajaxpatterns.org\/archive\/Heartbeat.php\">heartbeat<\/a>&#8220;.<\/p>\n<p>In my humble opinion, the vast majority of <em>onbeforeunload<\/em> events happen when a user clicks their mouse to navigate to a new page within your site. If we capture all mouse click events and record their timestamp, we can use that information to determine if a browser unload event was fired due to a link click.<\/p>\n<p>Sample jQuery code:<\/p>\n<pre class=\"prettyprint\"><code>if (!Date.now) {\r\n\u00a0 \u00a0 \/\/ a little polyfill for IE browsers that don't support Date.now\r\n\u00a0 \u00a0 Date.now = function() { return new Date().getTime(); }\r\n}\r\n\r\nvar lastClickTime = 0;\r\n$(window).click(function() {\r\n\u00a0 \u00a0 lastClickTime = Date.now();\r\n});\r\n\r\n$(window).bind('beforeunload', function() {\r\n\u00a0 var clickDiff = Date.now() - lastClickTime;\r\n\u00a0 if (clickDiff &lt; 100)\r\n    return;\r\n\r\n  if (\/* code that determines user is not logged out *\/) {\r\n    alert('Wait, don\\'t forget to log out!');\r\n    return false;\r\n  }\r\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A simple, yet not quite foolproof method to determine if an onbeforeunload event was cause by actually closing the browser window or tab.<\/p>\n","protected":false},"author":1,"featured_media":2443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2442"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=2442"}],"version-history":[{"count":2,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2442\/revisions"}],"predecessor-version":[{"id":2445,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/2442\/revisions\/2445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media\/2443"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=2442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=2442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=2442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}