4

我创建了一个 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/

4

7 回答 7

11

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

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

JSFIDDLE 链接

于 2016-03-28T13:20:17.697 回答
5

这是我的实现：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;
    });

})();
于 2013-04-25T17:00:30.047 回答
1

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

于 2012-04-27T21:08:50.373 回答
1

我相信没有可靠的方法可以知道鼠标离开了文档。如果您移动鼠标的速度足够快，那么您将什么也看不到。

于 2012-04-27T21:43:28.210 回答
1

这是一个没有 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>

于 2017-08-01T22:06:02.923 回答
0

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

这满足了 OP 的所有要求 - 您可以向下滚动，它的行为仍然相同。如果有人能阐明它是如何实现的，那就太好了……

于 2014-11-07T22:29:42.193 回答
0

你可以使用它：

(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");
        }
    });
于 2019-05-29T08:31:51.467 回答