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: /

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/bmHbt/

• javascript
• jquery
• jquery-events

• Why do you want to do this? ?? – Hawken Commented Apr 27, 2012 at 21:00
• 5 unless this is for a game, please don't do it – dstarh Commented Apr 27, 2012 at 21:04
• 3 Sounds like something meant to piss people off, like the infinite alert attack. At least this won't prevent the user from using the address bar or clicking close. – Kevin B Commented Apr 27, 2012 at 21:07
• 1 this is not a game. it just pops up a jquery dialog telling the visitor to visit again. @Hawken, why not? – Ronny K Commented Apr 27, 2012 at 21:08
• 1 For anyone ing here, please reconsider. To the marketing people: I may actually want to stay at your site (e.g. just temporarily switching tabs to check something and planning on ing back) but having your developers do this makes it much more likely that I will want to leave. I'm sorry for the "negativity". – patricknelson Commented Feb 26, 2019 at 1:24

7 Answers 7

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

Here's my implementation: http://jsfiddle/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;
    });

})();

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.

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.

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 pensate 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 = 'Wele 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>

I know this can be done. Here's a working demo: http://modules.xcart-service./?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....

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");
        }
    });