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

您可以尝试：

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

或

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

Answer 3

刚试过这个希望它有所帮助。继承人jsFiddle。

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

Answer 4

鼠标位于元素内部

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

当mouseleave元素

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

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

4 个答案: