Question

我创建了一个jQuery事件，当访问者离开页面时会弹出一个对话框。我正在使用e.pageY来检测鼠标位置。当鼠标位于Y：小于2时，弹出对话框。问题是，当我向下滚动页面并决定离开页面时，弹出窗口没有显示，因为鼠标不在Y：小于2.我该如何解决这个问题。即当我离开页面并将鼠标悬停在地址栏上时，尽管向下滚动，仍会出现弹出窗口。

这里是我的代码和底部的工作示例。

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

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

        }
    }
    mouseLastYPos = e.pageY;
});

工作示例：http://jsfiddle.net/bmHbt/

非常感谢你。

Answer 1

旧问题，但我想我也应该分享我的代码，也许有人觉得它很有用。

$(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

以下是我的实施：http://jsfiddle.net/fq8HT/

它还试图通过包括上次触发mousemove之间的差异来解释正在快速移动鼠标的人。

(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

不确定何时这是一个有效的功能。但无论如何，您可能必须跟踪页面的滚动位置以及其他一些变量，但是从那里您应该能够检测到浏览器窗口顶部的位置并使其更好地工作。

Answer 4

我相信没有可靠的方法知道鼠标离开了文档。如果你足够快地移动鼠标，那么你什么都看不到。

Answer 5

这是一个没有jQuery的解决方案，应该适用于桌面浏览器上的IE8 +，当用户将鼠标指向页面顶部时会触发：

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

此代码段的一般用途是检测用户退出页面的意图，然后执行某些操作，例如触发模式。

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

我知道这可以做到。这是一个有效的演示： http://modules.xcart-service.com/?target=exit_offers_demo

这符合OP的所有要求 - 您可以向下滚动并且它仍然起作用。如果有人能够了解它实际上是如何实现的话会很棒....

Answer 7

您可以使用它：

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

            alert('ok ');
        }

    });

})(jQuery);

这里另一种最适合您：

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

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

7 个答案: