我希望能够检测到鼠标何时离开窗口，以便在用户的鼠标在其他地方时停止触发事件。
关于如何做到这一点的任何想法？
如何检测鼠标何时离开窗口？
IT技术
javascript
browser
mouse
2021-02-02 16:45:01
6个回答
请记住，我的答案已经老化了很多。
在 html 页面上实现拖放行为时通常需要这种类型的行为。下面的解决方案在 IE 8.0.6、FireFox 3.6.6、Opera 10.53 和 Safari 4 上在 MS Windows XP 机器上进行了测试。
首先是 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");
}
});
为了在不考虑滚动条和自动完成字段或检查的情况下检测 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
======================== 编辑 ========================== ======
document.addEventListener("mouseleave") 似乎不会在新的 Firefox 版本上触发，mouseleave 需要附加到像 body 这样的元素或子元素。
我建议改用
document.body.addEventListener("mouseleave")
或者
window.addEventListener("mouseout")
使用 onMouseLeave 事件可防止冒泡，并允许您轻松检测鼠标何时离开浏览器窗口。
<html onmouseleave="alert('You left!')"></html>
其它你可能感兴趣的问题