javascript - 如何知道鼠标是否在窗口内？

Question

我似乎找不到答案。

我有一个 mouseleave 事件，我想在事件触发时检查鼠标当前是否在窗口内(如果不在，它可以是浏览器、后退按钮等)。

    var cursorInPage = false;
$(window).on('mouseout', function() {
    cursorInPage = false;
});
$(window).on('mouseover', function() {
    cursorInPage = true;
});
$('#some_element').on("mouseleave",function(){
  if(cursorInPage === true){
     //Code here runs despite mouse not being inside window
    }
 });

我可以绑定(bind)到窗口 mouseleave 事件吗？如果您离开文档/窗口的外部范围，是否会触发此类事件？上面的代码有问题，因为我相信元素的 mouseleave 在窗口之前触发

Answer 1

我不太确定您要我们为“在这里写什么？”输入什么，但您可以简单地设置一个 bool 值:

var cursorInPage = false;
$(window).on('mouseout', function() {
    cursorInPage = false;
});
$(window).on('mouseover', function() {
    cursorInPage = true;
});

然后使用该 bool 值继续:

if (cursorInPage === true) {
    alert('Woo, the cursor is inside the page!');
}

这是一个 example JSFiddle当光标进入或离开窗口区域时改变主体背景颜色，在查看 full-screen result 时更好地显示.