14

I would like to detect when a user is about to exit the page, before they click the back button, and do something - for example display a popup. I do not want to prevent the user from leaving the page, but only to grab their attention again.

This is already done by Optin Monster, but I want to implement it myself.

Where to start?

Edit: beforeunload is fired after the user clicked the back or x button. I would like to catch his exit intent, for example when the mouse is moving towards the back button, but before it was clicked.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Tzach
  • 12,889
  • 11
  • 68
  • 115
  • 1
    That's going to be tricky, if not impossible. For one, a browser's back button is outside of the scope of the document loaded in it, so the document has no way (?) of detecting events like `hover` on a browser's chrome. You can, theoretically, try to guess based on a mouse pointer's movement _from document to browser chrome_ (like direction and speed), but that's sketchy, problematic cross-browser, and hacky at best. Besides, I can just press `BKSP` on my keyboard, and it'll do the same thing, effectively circumventing your "exit intent" detection. – Richard Neil Ilagan Jun 03 '14 at 13:50
  • @RichardNeilIlagan that's the right direction. I wonder if there exists a plugin that does just that.. – Tzach Jun 03 '14 at 13:51
  • 1
    https://github.com/carlsednaoui/ouibounce maybe But just binding a window mouseleave eveznt could be enough imho – A. Wolff Jun 03 '14 at 13:51
  • Possible dublicate of http://stackoverflow.com/questions/14543245/browser-back-button-handling – Valery Statichny Jun 03 '14 at 13:52
  • @Tzach ~ I'd argue "right direction", but to humor you, no I haven't heard of any. – Richard Neil Ilagan Jun 03 '14 at 13:52
  • @RichardNeilIlagan in my opinion this is a better approach than a popup that actually interferes with the back button.. – Tzach Jun 03 '14 at 13:54
  • @A.Wolff this is actually what I'm looking for! Please post as an answer. – Tzach Jun 03 '14 at 13:55
  • Have you guys ever head of .mousemove() ? – Hristo Georgiev Jun 03 '14 at 13:57
  • @HristoGeorgiev Have you ever check how many times mousemove handler is fired, especially on document/window level? ;) – A. Wolff Jun 03 '14 at 14:01
  • Sometimes I wish I could vote to close questions solely on the grounds that it's a terrible idea that should never be implemented anyway. – Blazemonger Jun 03 '14 at 14:14
  • You can track clicking back button with 100% accuracy and not using mouse movement. By replacing browser history zero state (if user enters site from other domain) with your custom url, maybe the current url with some get parameters which will trigger some modal. And listening to popstate. U can even achieve the same result if browser doesnt support history states only with really hacky version. I have coded and implemented this feature. – Kristapsv Apr 24 '15 at 09:07

3 Answers3

23

Ouibounce does this. There is a live demo here.

npm install ouibounce

Then:

var ouibounce = require('ouibounce');
var modal = document.getElementById('ouibounce-modal')
ouibounce(modal);
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
21

Here's how you can do it:

$(document).on('mouseleave', leaveFromTop);

function leaveFromTop(e){
    if( e.clientY < 0 ) // less than 60px is close enough to the top
      alert('y u leave from the top?');
}

I hope this is what you are looking for. Good luck!

Hristo Georgiev
  • 2,499
  • 1
  • 16
  • 23
7

The problem I find with these techniques (like the one implemented on Ouibounce or the one proposed by Hristo Georgiev) is they also detect when the mouse enters the window if the cursor is outside the page before page load. It's not a big deal, but it might bring an unwanted behavior. An extra tweak must be done for this solution to work fine. One thing that comes to my mind right know would be to use a flag to check the mouse logic.

Ernesto Hegi
  • 333
  • 3
  • 3