如何通过向上移动到地址栏来检测鼠标离开页面？

Question

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. ie 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/

Answer 1

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

Answer 2

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

})();

Answer 3

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.

Answer 4

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.

Answer 5

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> 

Answer 6

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....

Answer 7

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