logo标签列表

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

javascriptjqueryjquery-events
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;
});​

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

5
除非这是为了游戏，否则请不要这样做。 - dstarh
3
听起来像是一种旨在惹恼人们的东西，就像无限警报攻击一样。至少这不会阻止用户使用地址栏或点击关闭。 - Kevin B
1
这不是一个游戏。它只是弹出一个jQuery对话框，告诉访问者再次访问。@Hawken，为什么不呢？ - Ronny K
评论区有很多负面情绪，但尽管用户反馈，这仍然是一种非常有效的营销策略。捕获电子邮件、升级销售、一次性优惠等。 - Sgnl
1
对于任何来到这里的人，请重新考虑。对于市场营销人员：我可能真的想留在你们的网站上（例如，只是暂时切换标签页来检查某些内容并计划回来），但让你们的开发人员这样做会更容易让我想要离开。对于“消极”的言论，我感到抱歉。 - patricknelson
显示剩余3条评论
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链接

谢谢，您的回答对我很有帮助，所以我点赞了！ - Nurhak Kaya
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;
    });

})();
问题：这似乎也会被简单地滚动回页面顶部所触发。 - hakJav
@hakJav 不是这样的。 - Mark Baijens
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>

1

不确定这个功能什么时候会有效。但无论如何，您可能需要跟踪页面的滚动位置，混合一些其他变量，但从中您应该能够检测到浏览器窗口的顶部在哪里，并使其更好地工作。

1

我相信没有可靠的方法可以知道鼠标离开了文档。如果你移动鼠标足够快，那么你将看不到任何东西。

幸运的是，你也可以切换应用程序/窗口以避免这种情况。 - Hawken
0
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");
        }
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接