如何检测鼠标何时离开窗口？
我希望能够检测到鼠标离开窗口的时候，所以我可以在用户的鼠标在其他地方停止触发事件。
任何想法如何做到这一点？
在HTML页面上实现拖放行为时，通常需要这种types的行为。 下面的解决scheme在MS Windows XP机器上的IE 8.0.6，FireFox 3.6.6，Opera 10.53和Safari 4上进行了testing。
首先来自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); } } 然后使用此方法将事件处理程序附加到文档对象的鼠标事件：
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"); } });
最后，这是一个embedded了debugging脚本的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'); });
只要鼠标不在页面中，就会触发此事件。 只要改变function做任何你想要的。
你也可以使用：
$(document).mouseenter(function () { console.log('in'); });
当鼠标再次回到页面时触发。
资料来源： https : //stackoverflow.com/a/16029966/895724
这适用于我：
addEvent(document, 'mouseout', function(evt) { if (evt.toElement == null && evt.relatedTarget == null) { 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'); } });
我正在使用这个拖放file upload部件。 它不是绝对准确的，当鼠标距离窗口边缘一定距离时触发。
我收回我说的话。 有可能的。 我写这个代码，完美的作品。
window.onload = function() { $span = document.getElementById('text'); window.onmouseout = function() { $span.innerHTML = "mouse out"; } window.onmousemove = function() { $span.innerHTML = "mouse in"; } }
在铬，火狐，歌剧作品。 不在IE中testing，但假设它的工作。
编辑。 IE一如既往的麻烦。 要使其在IE中工作，请将窗口中的事件replace为文档：
window.onload = function() { $span = document.getElementById('text'); document.onmousemove = function() { $span.innerHTML = "mouse move"; } document.onmouseout = function() { $span.innerHTML = "mouse out"; } }
将它们组合在一起用于crossbrowser kick ass光标检测o0：P
使用onMouseLeave事件可防止冒泡，并允许您轻松检测鼠标何时离开浏览器窗口。
<html onmouseleave="alert('You left!')"></html>
我已经尝试了以上所有，但似乎没有按预期工作。 经过一些研究，我发现e.relatedTarget就是鼠标离开窗口之前的 html 。
所以…我最终得到这个：
document.body.addEventListener('mouseout', function(e) { if(e.relatedTarget === document.querySelector('html')) { console.log('We\'re OUT !'); } });
请让我知道，如果你发现任何问题或改进！
也许如果你不断地在body标签中听OnMouseOver，然后在事件不是正常的时候callback，但是，正如Zack所说，这可能是非常难看的，因为不是所有的浏览器都以同样的方式处理事件，甚至有一些即使在同一页面上超过一个div，也可能会丢失MouseOver。
应用这个CSS：
html { height:100%; }
这确保了html元素占据了窗口的整个高度。
应用这个jQuery：
$("html").mouseleave(function(){ alert('mouse out'); });
mouseover和mouseout的问题在于，如果将鼠标hover在/移出某个子元素的HTML上，它将引发该事件。 当鼠标移动到一个子元素时，我给出的函数没有被设置。 只有当您将鼠标移出/放入窗口时才会启动
只是为了让你知道你可以做到这一点当用户在窗口中的鼠标：
$("html").mouseenter(function(){ alert('mouse enter'); });
$(window).mouseleave(function(event) { if (event.toElement == null) { //Do something } })
这可能有点不好意思，但只有在鼠标离开窗口时才会触发。 我不断捕捉孩子的事件，这解决了它
我没有testing过这个，但我的直觉是在body标签上做一个OnMouseOut函数调用。
也许这会帮助一些稍后来到这里的人。 window.onblur和document.mouseout 。
window.onblur被触发：
- 您可以使用
Ctrl+Tab或Cmd+Tab切换到另一个窗口。 - 您在文档检查器上专注（不只是鼠标hover）。
- 您切换桌面。
基本上任何时候，浏览器标签失去了重点。
window.onblur = function(){ console.log("Focus Out!") }
document.mouseout被触发：
- 您将光标移到标题栏上。
- 您可以使用
Ctrl+Tab或Cmd+Tab切换到另一个窗口。 - 您打开将光标移到文档检查器。
基本上在任何情况下，当你的光标离开文档。
document.onmouseleave = function(){ console.log("Mouse Out!") }
$(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).bind('dragleave', function (e) { if (e.originalEvent.clientX == 0){ alert("left window"); } });
