如何检测鼠标何时离开窗口？

我希望能够检测到鼠标何时离开窗口，这样我就可以在用户的鼠标在其他地方时停止触发事件。

有什么办法吗？

138250 次浏览
小开

您可以对 body 标记执行 OnMouseOut 函数调用。

小开

我收回我说的话，这是有可能的，我写了这个代码，运行完美。

window.onload = function() {


$span = document.getElementById('text');


window.onmouseout = function() {
$span.innerHTML = "mouse out";
}


window.onmousemove = function() {
$span.innerHTML = "mouse in";
}


}

可以在 chrome，firefox，Opera 中工作。不能在 IE 中测试，但是假设它可以工作。

IE 总是带来麻烦。要让它在 IE 中工作，替换从窗口到文档的事件:

window.onload = function() {


$span = document.getElementById('text');


document.onmousemove = function() {
$span.innerHTML = "mouse move";
}


document.onmouseout = function() {
$span.innerHTML = "mouse out";
}


}

结合他们的跨浏览器踢屁股光标检测0: P

小开

请记住，我的答案已经老了很多。

在 html 页面上实现拖放行为时，通常需要这种类型的行为。下面的解决方案在 IE8.0.6、 FireFox 3.6.6、 Opera 10.53和 Safari 4上进行了测试。
首先是来自 Peter-Paul Koch 的一个小函数; 跨浏览器事件处理程序:

function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}

然后使用此方法将事件处理程序附加到文档对象 mouseout 事件:

addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
alert("left window");
}
});

最后，这是一个 html 页面，其中嵌入了用于调试的脚本:

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
if (!from || from.nodeName == "HTML") {
// stop your drag event here
// for now we can just use an alert
alert("left window");
}
});
});
</script>
</head>
<body></body>
</html>
小开

这对我有用:

addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});
小开

如果你正在使用 jQuery，那么这个简短而甜蜜的代码怎么样-

$(document).mouseleave(function () {
console.log('out');
});

只要鼠标不在页面中，就会触发此事件。只要改变函数就可以了。

你也可以用:

$(document).mouseenter(function () {
console.log('in');
});

当鼠标再次进入页面时触发。

资料来源: https://stackoverflow.com/a/16029966/895724

小开

应用此 css:

html
{
height:100%;
}

这样可以确保 html 元素占据窗口的整个高度。

应用这个 jquery:

$("html").mouseleave(function(){
alert('mouse out');
});

Mouseover 和 mouseout 的问题在于，如果您将鼠标悬停在/悬停在 html 上到一个子元素，那么它将启动事件。我给 不是的函数在鼠标移动到子元素时启动。只有当你把鼠标移出/移入窗口时，它才会启动

只是为了让你知道，当用户鼠标在窗口中时，你可以这样做:

$("html").mouseenter(function(){
alert('mouse enter');
});
小开

这是铬合金的,

$(document).bind('dragleave', function (e) {
if (e.originalEvent.clientX == 0){
alert("left window");
}
});
小开

这些答案对我都不管用，我现在用:

document.addEventListener('dragleave', function(e){


var top = e.pageY;
var right = document.body.clientWidth - e.pageX;
var bottom = document.body.clientHeight - e.pageY;
var left = e.pageX;


if(top < 10 || right < 20 || bottom < 10 || left < 10){
console.log('Mouse has moved out of window');
}


});

我使用这个来拖放文件上传小部件。当鼠标到达窗口边缘的一定距离时触发，这并不是绝对准确的。

小开

以上的方法我都试过了，但似乎都没有达到预期的效果。经过一些研究，我发现 目标是 Html只是 在鼠标退出窗口之前。

所以... 我最后得到了这个:


document.body.addEventListener('mouseout', function(e) {
if (e.relatedTarget === document.querySelector('html')) {
console.log('We\'re OUT !');
}
});

如果您发现任何问题或改进，请让我知道！

2019年最新情况

(用户1084282发现)

document.body.addEventListener('mouseout', function(e) {
if (!e.relatedTarget && !e.toElement) {
console.log('We\'re OUT !');
}
});
小开

使用 onMouseleave 事件可以防止冒泡，并允许您轻松检测鼠标何时离开浏览器窗口。

<html onmouseleave="alert('You left!')"></html>

Http://www.w3schools.com/jsref/event_onmouseleave.asp

小开

也许这能帮助一些晚点来的人。 window.onblur和 document.mouseout。

当以下情况触发 window.onblur:

  • 使用 Ctrl+Tab或 Cmd+Tab切换到另一个窗口。
  • 您可以将注意力(而不仅仅是鼠标停留)集中在文档检查器上。
  • 你换台式电脑。

基本上只要浏览器标签失去焦点。

window.onblur = function(){
console.log("Focus Out!")
}

当以下情况触发 document.mouseout:

  • 将光标移到标题栏上。
  • 使用 Ctrl+Tab或 Cmd+Tab切换到另一个窗口。
  • 你打开移动光标到文档检查器。

基本上在任何情况下，当您的光标离开文档时。

document.onmouseleave = function(){
console.log("Mouse Out!")
}
小开

这可能有点古怪，但只有当鼠标离开窗口时才会触发。它不断捕捉儿童事件，这解决了它

 $(window).mouseleave(function(event) {
if (event.toElement == null) {
//Do something
}
})
小开 
$(window).mouseleave(function() {
alert('mouse leave');
});
小开

这里是一些答案的组合。我只包含了一次显示模型的代码。当点击其他任何地方时，模型就消失了。

<script>
var leave = 0
//show modal when mouse off of page
$("html").mouseleave(function() {
//check for first time
if (leave < 1) {
modal.style.display = "block";
leave = leave + 1;
}
});


// Get the modal with id="id01"
var modal = document.getElementById('id01');
            

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
小开

为了检测鼠标离开而不考虑滚动条和自动完成字段或检查:

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

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

AddEventListener (“ mouseleave”)似乎没有在新的 Firefox 版本上激活，需要将 mouseleave 附加到 body 或子元素等元素上。

我建议用

document.body.addEventListener("mouseleave")

或者

window.addEventListener("mouseout")
小开

我试了一个又一个，找到了当时最好的答案:

Https://stackoverflow.com/a/3187524/985399

我跳过旧的浏览器，所以我让代码更短，以便在现代浏览器(IE9 +)上工作

    document.addEventListener("mouseout", function(e) {
let t = e.relatedTarget || e.toElement;
if (!t || t.nodeName == "HTML") {
console.log("left window");
}
});


document.write("<br><br>PROBLEM<br><br><div>Mouseout trigg on HTML elements</div>")

这里你看到的 浏览器支持

我觉得还挺短的

但问题仍然存在，因为 “ mouseout”触发文档中的所有元素。

为了防止这种情况发生，请使用 鼠标离开(IE5.5 +)。

下面的代码在不触发元素内部或外部元素的情况下工作。还可以尝试在文档之外进行拖放。

var x = 0


document.addEventListener("mouseleave", function(e) { console.log(x++)
})


document.write("<br><br>SOLUTION<br><br><div>Mouseleave do not trigg on HTML elements</div>")

您可以在任何 HTML 元素上设置事件。但是在 document.body上不要有事件，因为当鼠标指针在滚动条上时，当你想要滚动但不想触发鼠标离开事件时，窗口滚动条可能会收缩正文并触发。改为在 document上设置它，如示例所示。

小开

参见 mouseover和 mouseout。

var demo = document.getElementById('demo');
document.addEventListener("mouseout", function(e){demo.innerHTML="😞";});
document.addEventListener("mouseover", function(e){demo.innerHTML="😊";});
div { font-size:80vmin; position:absolute;
left:50%; top:50%; transform:translate(-50%,-50%); }
<div id='demo'>😐</div>

小开

以下是2021年的答案:

您可以在 html标签(在 Chrome91和 Firefox90中测试过)中使用 mouseleave(和 mouseenter在输入时进行检测)

尝试在下面的 Snippet 中，通过在其中悬停和悬停。

document.documentElement.addEventListener('mouseleave', () => console.log('out'))
document.documentElement.addEventListener('mouseenter', () => console.log('in'))

小开

下面的代码应该适用于普通的 JS:

document.addEventListener("mouseleave", (event) => {
if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
//your code
}
});

提交答案