CODEWITHSUNDEEP
javascriptjqueryjquery-events
Ronny K
Ronny K

Reputation: 3741

How can I detect a mouse leaving a page by moving up to the address bar?

I have created a jQuery event that pops up a dialog when a visitor is leaving a page. I am using the e.pageY to detect the mouse position. when the mouse is at Y: less than 2, the dialog pops up. the problem is, when the I scroll down through the page and decided to leave the page, the pop up does not show since the mouse is not at Y: less than 2. How can I fix that. i.e. when I leave the page and just hover over the address bar, a pop up appears despite scrolling down.

Here my code and a working example at the bottom.

var mouseLastYPos = null;
$(document).mousemove(function(e){ 
    if(mouseLastYPos){ 
        if (e.pageY < mouseLastYPos && e.pageY <= 2){

           $('#mystuff').show();

        }
    }
    mouseLastYPos = e.pageY;
});​

Working example: http://jsfiddle.net/bmHbt/

Upvotes: 4

Views: 7233

Answers (7)

Mamunur Rashid
Mamunur Rashid

Reputation: 196

You Can use it:

(function($){
    var topValue = 50;
    var mouseY = 0;
    jQuery( "body" ).on('mousemove',function( event ) {
        mouseY = event.clientY;
        if(mouseY <= topValue) {

            alert('ok ');
        }

    });

})(jQuery);

Another One here it is best for you : 

$(document).bind("mouseleave", function(e) {
        if (e.pageY - $(window).scrollTop() <= 1) {    
            // $('#BeforeYouLeaveDiv').show();
            alert('ok ');
            $(document).unbind("mouseleave");
        }
    });

Upvotes: 0

Sgnl
Sgnl

Reputation: 1959

Here's a solution without jQuery and should work for IE8+ on Desktop Browsers that will trigger when the user directs their mouse towards the top of the page:

document.addEventListener('mouseleave', function(e) {
  // position of the mouse when it leaves the document, we only care about the top of the document so we use `e.pageY`
  console.log('e.pageY: ', e.pageY);

  // get the position of where the page is scrolled to. 
  console.log('document.body.scrollTop: ', document.body.scrollTop);

  console.log(e.pageY - document.body.scrollTop);

  var isLeaving = e.pageY - document.body.scrollTop;

  // you can adjust this number value to compensate if the user leaves
  if (isLeaving <= 50) {
    // do something here!
  }
});

The general purpose of this snippet is to detect a user's intent to exit the page and then do something like trigger a modal.

document.addEventListener('mouseleave', e => {
  var isLeaving = e.pageY - document.body.scrollTop;

  if (isLeaving <= 50) {
    // do something ...
    let elms = document.querySelectorAll('.target');
    for (var i = elms.length - 1; i >= 0; i--) {
      elms[i].innerHTML = 'Welcome Back!'
    }
  }
});
  html, body, section {
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }

  h1 {
    text-align: center;
  }
<section>
  <h1 class="target">Get ahead and try to leave</h1>
</section>

<section>
  <h1 class="target">Get ahead and try to leave</h1>
</section>

<section>
  <h1 class="target">Get ahead and try to leave</h1>
</section>

<section>
  <h1 class="target">Get ahead and try to leave</h1>
</section>

Upvotes: 1

ankitr
ankitr

Reputation: 6172

Old Question, but I think I should share my code also, maybe someone finds it useful.

$(function(){
    var mouseY = 0;
    var topValue = 0;
    window.addEventListener("mouseout",function(e){
        mouseY = e.clientY;
        if(mouseY<topValue) {
            alert("Do something here!!!");
        }
    },
    false);
});

JSFIDDLE Link

Upvotes: 11

Doodled
Doodled

Reputation: 180

I know this can be done. Here's a working demo: http://modules.xcart-service.com/?target=exit_offers_demo

This meets all the requirements of the OP - you can scroll down and it still acts the same. Would be great if someone could shed some light on how it is actually achieved....

Upvotes: 0

ifightcrime
ifightcrime

Reputation: 1302

Here's my implementation: http://jsfiddle.net/fq8HT/

It also tries to account for someone who is moving their mouse really fast by including the difference between the last time mousemove was triggered.

(function() {

  var current_scroll = 0;
  var last_mouse_y = null;

  $(document)
    .scroll(function() {
      current_scroll = $(this).scrollTop();
    })
    .mousemove(function(e) {
      var speed = last_mouse_y - e.pageY;
      var success_val = e.pageY - speed;

      if (success_val < last_mouse_y && success_val <= current_scroll) {
        $('#stop-leaving').show();
      } else {
        $('#stop-leaving').hide();
      }

      last_mouse_y = e.pageY;
    });

})();

Upvotes: 5

Artem Latyshev
Artem Latyshev

Reputation: 595

I believe there is no reliable way to know that the mouse left the document. If you move the mouse fast enough then you will see nothing.

Upvotes: 1

gokujou
gokujou

Reputation: 1491

Not sure when this would be an effective feature. But anyways, you probably will have to track the scroll position of the page mixed with some other variables, but from that you should be able to detect where the top of the browser window is and get it to work better.

Upvotes: 1

Related Questions