Detect if user will leave site like Bounce Exchange

Question

Bounce Exchange has figured out an almost perfect way of detecting if a user will leave the website. They do this based on tracking mouse gestures, mouse velocity, and breaking of the browser plane. If they detect someone is leaving they fire off a popup on a lightbox.

I can poorly emulate this, by the following:

$("body").mouseleave(function() {
    jQuery('#avoid-bounce').show();
});

The only problem is this is rather annoying. Even if it captures someone, the moment they leave the body it fires again.

How probable would it be to factor in mouse speed and allow the event to fire only once? I'm still fairly new to JavaScript and jQuery, but I'm learning.

Answer 1

This is exactly what .one() is for:

$("body").one('mouseleave', function() {
    jQuery('#avoid-bounce').show();
});

Answer 2

You can add a flag to your code:

$("body").mouseleave(function() {
    if ( jQuery('#avoid-bounce').data('shown') != true ) {
        jQuery('#avoid-bounce').data('shown', true).show();
    }
});

Creating a flag will make sure the show() code will not be called the second time.

Answer 3

Or you can try OuiBounce,the bounce exchange alternative: https://github.com/carlsednaoui/bounce-exchange-alternative