我希望能够检测到鼠标何时离开窗口，以便在用户的鼠标位于其他位置时停止触发事件。
有关如何执行此操作的任何想法？
Answers:
在html页面上实现拖放行为时，通常需要这种行为。以下解决方案已在MS Windows XP计算机上的IE 8.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>如果您使用的是jQuery，那么这段简短又可爱的代码-
$(document).mouseleave(function () {
console.log('out');
});只要鼠标不在您想要的页面中，就会触发此事件。只需更改功能即可执行任何操作。
您还可以使用：
$(document).mouseenter(function () {
console.log('in');
});在鼠标再次回到页面时触发。
这对我有用：
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});addEvent啊
if (!evt.toElement && !evt.relatedTarget)
为了在不考虑滚动条和autcomplete字段的情况下检测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========================编辑========================= ======
在新的Firefox版本上似乎未触发document.addEventListener（“ mouseleave”），需要将mouseleave附加到诸如body或child元素之类的元素上。
我建议改用
document.body.addEventListener("mouseleave")要么
window.addEventListener("mouseout")使用onMouseLeave事件可防止冒泡，并允许您轻松检测鼠标何时离开浏览器窗口。
<html onmouseleave="alert('You left!')"></html>document.onmouseleave = function() { alert('You left!') };使用：不要使用document.body触发可收缩主体的滚动条！不需要用于防止元件着火的代码。好的解释：developer.mozilla.org/en-US/docs/Web/API/Element/…–
这些答案都不对我有用。我现在正在使用：
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');
}
});我将其用于拖放文件上传小部件。它不是绝对准确的，是在鼠标距窗口边缘一定距离时触发的。
我已经尝试了以上所有方法，但是似乎没有预期的效果。一个小小的研究后，我发现，e.relatedTarget是HTML只是鼠标退出窗口前。
所以...我最终得到了这个：
document.body.addEventListener('mouseout', function(e) {
if (e.relatedTarget === document.querySelector('html')) {
console.log('We\'re OUT !');
}
});
如果您发现任何问题或改进，请告诉我！
2019更新
（因为user1084282被发现）
document.body.addEventListener('mouseout', function(e) {
if (!e.relatedTarget && !e.toElement) {
console.log('We\'re OUT !');
}
});relatedTarget鼠标离开窗口时为null。受到@ user1084282的答案的启发，将其更改为：if(!e.relatedTarget && !e.toElement) { ... }并且有效
if(!e.relatedTarget && !e.toElement)而不是实际答案中的条件，我确认这在Chrome，Firefox和IE Edge上可以正常工作。它检测到鼠标离开文档主体。
我收回我所说的话。有可能的。我写了这段代码，效果很好。
window.onload = function() {
$span = document.getElementById('text');
window.onmouseout = function() {
$span.innerHTML = "mouse out";
}
window.onmousemove = function() {
$span.innerHTML = "mouse in";
}
}适用于Chrome，Firefox，Opera。Aint在IE中进行了测试，但认为它可以工作。
编辑。IE一如既往地引起麻烦。要使其在IE中工作，请将事件从窗口替换为文档：
window.onload = function() {
$span = document.getElementById('text');
document.onmousemove = function() {
$span.innerHTML = "mouse move";
}
document.onmouseout = function() {
$span.innerHTML = "mouse out";
}
}结合它们进行跨浏览器踢屁股光标检测o0：P
应用此CSS：
html
{
height:100%;
}这样可以确保html元素占据窗口的整个高度。
应用这个jQuery：
$("html").mouseleave(function(){
alert('mouse out');
});mouseover和mouseout的问题在于，如果将html鼠标悬停在/移出子元素，则会触发该事件。将鼠标悬停在子元素上时，不会给我提供的功能。仅当您将鼠标移出/移入窗口时，它才会关闭
仅当您知道您可以在用户将鼠标移到窗口中时执行以下操作：
$("html").mouseenter(function(){
alert('mouse enter');
});我一个接一个地尝试，并在当时找到了最佳答案：
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”触发了文档中的所有元素。
为防止这种情况发生，请使用mouseleave（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，因为当您要滚动而不希望触发mouseLeave事件时，如果鼠标指针悬停在滚动条上，则Windows滚动条可能会收缩主体并触发。document如示例中所示，将其设置为on 。
也许如果您一直在body标签中监听OnMouseOver，则在事件未发生时进行回调，但是，正如Zack所说，这可能非常丑陋，因为并非所有浏览器都以相同的方式处理事件，甚至即使在同一页面上经过div也可能丢失MouseOver。
也许这会对以后来这里的人有所帮助。
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.onblur。+1
这对我有用。这里是一些答案的组合。我只包含了一次显示模型的代码。当在其他任何地方单击该模型时，模型就会消失。
<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>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>