使用jquery检测鼠标何时通过页面顶部离开答案

【问题标题】：Detect when mouse leaves via top of page with jquery使用jquery检测鼠标何时通过页面顶部离开
【发布时间】：2010-12-09 17:16:09
【问题描述】：

这个 Jquery 问题已经困扰我一段时间了。我开发了一个脚本，其中一个功能是检测鼠标何时通过页面顶部离开。代码如下：

    $(document).bind("mouseleave", function(e)
    {
    console.log(e.pageY);
    if (e.pageY <= 1)
        {    
        now = new Date();           
        for (i=0; i < times.length; i++)
            {
            if (now.getTime() > times[i][0] && now.getTime() < times[i][1])
                {
                    $.fn.colorbox({iframe:true, width:650, height:600, href: "work.html", open: true});          
                }    
            }
        }
    });

这在所有浏览器中都非常适合我。出于某种原因，它在 Chrome 中随机运行，而对于测试该站点的朋友来说，它似乎根本不在 Firefox 中。在我的浏览器（firefox 3.5.3）中，e.pageY 在控制台框中记录为接近 0 的数字，但在我的朋友浏览器（也是 firefox 3.5.3）中，最低值约为 240。我不知道为什么会这样考虑到相同的浏览器正在发生。有没有人知道如何调试这个，或者另一种更可靠的方法来检测鼠标何时通过顶部离开网页？我希望这是有道理的。

【问题讨论】：

你试过快速移动鼠标吗？如果鼠标快速移动，事件有时不会触发。
如果移动速度非常快，大部分时间它都会记录下来（这不是真正的问题）。然而，为了测试鼠标移动非常缓慢
@vava，我只是说你的朋友可能机器速度较慢/屏幕较大，并且移动鼠标速度很快。这可能是造成差异的原因。

标签： javascript jquery cross-browser

【解决方案1】：

如果你的窗口向下滚动就会出现问题，将一堆<br/>s 添加到你的页面并向下滚动一行，你就会看到它。

因此，与其查看 e.pageY 是否

if (e.pageY - $(window).scrollTop() <= 1)
    {    
    // do something
    }

【讨论】：

【解决方案2】：

我使用了另一种技术，几乎适用于所有浏览器。诀窍是使用$("body") 或$(window)。

$(window) 不适用于 IE，但 $("body") 部分适用于 FF，因为正文可能无法填满整个窗口。

这是完整的页面代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>
  var mouseX = 0;
  var mouseY = 0;
  var theFrame;
$(function() {
    theFrame = $("body"); //$(window) for non-IE
      theFrame.mousemove( function(e) {
        //horizontal distance from edge
        mouseX = Math.min(theFrame.width() - e.pageX, e.pageX);
        //vertical distance from top
        mouseY = e.pageY;
        $("#mx").html(mouseX);
        $("#my").html(mouseY);
      });
    theFrame.mouseout(function() {
        if(mouseY<=mouseX)
            $("#in_out").html("out-top");
        else
            $("#in_out").html("out");
    });
    theFrame.mouseover(function() {
        $("#in_out").html("in");
    });
});
</script> 
</head>
<body>
<span id="in_out"></span>
<br />Hor: <span id="mx"></span>
<br />Ver: <span id="my"></span>

</body>
</html>

【讨论】：

注意：in_out、mx、my 仅用于调试目的：P

【解决方案3】：

$(document).on('mouseleave', leaveFromTop);

function leaveFromTop(e){
    if( e.clientY < 0 ) // less than 60px is close enough to the top
      alert('y u leave from the top?');
}

这个doesn't work 在旧的 IE 版本上很好，因为那些版本没有报告鼠标位置，但它已经足够好了。

【讨论】：

【解决方案4】：

如果你只是想要一些不需要在 EI 中工作的轻量级的东西，这里是一个普通的 JS 解决方案

/**
 * Trigger an event when the cursor leaves the top of the window
 * @param {*} threshold how close does it need to be to the top
 * @param {*} cb callback function to trigger
 */
function onExit (threshold, cb) {
  threshold = threshold || 60
  var hasExited = false
  document.addEventListener('mouseout', function (e) {
    if (e.clientY < threshold && e.movementY < 0 && !hasExited) {
      hasExited = true
      cb(e)
    }
  })
}

示例用法：

onExit(20, function() {
  console.log('Mouse has left the top of the window!')
}

【讨论】：

【解决方案5】：

为了在不考虑滚动条和自动完成字段的情况下检测 mouseleave 或检查：

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

条件说明：

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom

坚持

event.clientY <= 0

如果您只想检测顶部的退出

【讨论】：