I need a way to check and see if the mouse is outside the browser window. The problem is that the mouseout event (or mousemove) isn't triggered when the mouse RAPIDLY moves outside the the browser window (my element is close to the edge). I figured the best way to solve my problem is to check on a timer if the mouse is inside the window or not, but I haven't found a way to do that, since I need an event to fire in order to get the mouse coordinates.
I'm a javascript/jquery newbie, but it seems like there should be a way to do this but I definitely haven't been able to find it so far. Maybe I could force a mouse event to trigger and see if there's any xy value? Any idea how I could do that?
Thanks in advance!
I need a way to check and see if the mouse is outside the browser window. The problem is that the mouseout event (or mousemove) isn't triggered when the mouse RAPIDLY moves outside the the browser window (my element is close to the edge). I figured the best way to solve my problem is to check on a timer if the mouse is inside the window or not, but I haven't found a way to do that, since I need an event to fire in order to get the mouse coordinates.
I'm a javascript/jquery newbie, but it seems like there should be a way to do this but I definitely haven't been able to find it so far. Maybe I could force a mouse event to trigger and see if there's any xy value? Any idea how I could do that?
Thanks in advance!
Share Improve this question edited Mar 22, 2017 at 20:43 Sabrina Leggett asked Jan 15, 2012 at 21:28 Sabrina LeggettSabrina Leggett 9,4957 gold badges50 silver badges50 bronze badges 3 |6 Answers
Reset to default 6Seems like @Joshua Mills solved this problem here:
- How can I detect when the mouse leaves the window?
Although it was never officially selected as an answer.
You need to check the target of the event to make sure the mouse left the whole page.
Live Demo
JS
$(function() {
var $window = $(window),
$html = $('html');
$window.on('mouseleave', function(event) {
if (!$html.is(event.target))
return;
$('.comeback').removeClass('hidden');
});
$window.on('mouseenter', function(event) {
$('.comeback').addClass('hidden');
});
});
HTML
<div>
<div>
Test
</div>
<div class="comeback">
Come back!
</div>
<div>
Test
</div>
</div>
CSS
.hidden { display: none; }
The test case includes some element nesting to verify that it really works.
I think, this will look like
<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>
Try with:
document.addEventListener("mouseleave", function(e){
if( e.clientY < 0 )
{
alert("I'm out!");
}
}, false);
I tried one after other and this actually works!
https://stackoverflow.com/a/3187524/985399
I skip old browsers so I made code shorter to work on modern browsers IE9+:
document.addEventListener("mouseout", function() {
let e = event, t = e.relatedTarget || e.toElement;
if (!t || t.nodeName == "HTML") {
console.log("left window");
}
});
Here you see the browser support
It should be fairly simple:
document.onmouseout = function() {
alert('out');
};
Or jQuery style:
$(document).mouseout(function() {
alert('out');
});
Fiddle: http://jsfiddle.net/xjJAB/
Tested in IE8, chrome, FF. The event triggers every time for me at least.
mouseleave. It certainly works as expected in Firefox, and Chrome I believe. I haven't tested IE, Opera or Safari however. – ClarkeyBoy Commented Jan 15, 2012 at 21:36