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

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

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

Answer 1

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

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

然后使用该布尔值继续：

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

这是一个example JSFiddle，它会在光标进入或离开窗口区域时更改正文背景颜色，在查看full-screen result 时会更好地显示。

Answer 2

刚刚测试了这个希望它有所帮助。这是jsFiddle。

$(document,window,'html').mouseleave(function(){alert('bye')}).mouseenter(function(){alert('welcome back!')})

Answer 3

你可以试试：

$('body').mouseout(function() {
alert('Bazzinga...');
});

或

$(window).mouseleave(function() {
alert('Bazzinga...');
});

Answer 4

当鼠标在元素内时

$('#outer').mouseover(function() {
  $('#log').append('<div>Handler for .mouseover() called.</div>');
});

当鼠标离开元素时

$('#outer').mouseleave(function() {
  $('#log').append('<div>Handler for .mouseleave() called.</div>');
});