Geek Answers Handbook

Detect when mouse leaves top of page using jquery

This jQuery issue has been listening to me for a while. I developed a script, with one function detecting when the mouse goes to the top of the page. Here is the code:

$(document).bind("mouseleave", function(e) { console.log(e.pageY); if (e.pageY <= 1) { now = new Date(); for (i=0; i < times.length; i++) { if (now.getTime() > times[i][0] && now.getTime() < times[i][1]) { $.fn.colorbox({iframe:true, width:650, height:600, href: "work.html", open: true}); } } } });

This works great for me in all browsers. For some reason, it works by chance in Chrome and, it would seem, not at all in Firefox for a friend who tested the site. In my browser (firefox 3.5.3) e.pageY is registered in the console as a number about 0, however in my friends browser (also firefox 3.5.3) the lowest value is about 240. I don’t know why this happens taking into account identical browsers. Does anyone know how to debug this, or another more reliable detection method, when a mouse exits a web page from above? Hope this makes sense.

+7
javascript jquery cross-browser
source share
5 answers

The problem arises if your window scrolls down, adds a link <br/> to your page and scrolls down one line, and you will see it.

So instead of seeing if e.pageY <= 1, subtract scrollTop:

 if (e.pageY - $(window).scrollTop() <= 1) { // do something }
+12
source share

I used a different technique, almost works for all browsers. The trick uses $("body") or $(window) .

$(window) does not work for IE, but $("body") works partially for FF, since the body may not fill the entire window.

Here is the full page code:

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script> var mouseX = 0; var mouseY = 0; var theFrame; $(function() { theFrame = $("body"); //$(window) for non-IE theFrame.mousemove( function(e) { //horizontal distance from edge mouseX = Math.min(theFrame.width() - e.pageX, e.pageX); //vertical distance from top mouseY = e.pageY; $("#mx").html(mouseX); $("#my").html(mouseY); }); theFrame.mouseout(function() { if(mouseY<=mouseX) $("#in_out").html("out-top"); else $("#in_out").html("out"); }); theFrame.mouseover(function() { $("#in_out").html("in"); }); }); </script> </head> <body> <span id="in_out"></span> <br />Hor: <span id="mx"></span> <br />Ver: <span id="my"></span> </body> </html>
0
source share
 $(document).on('mouseleave', leaveFromTop); function leaveFromTop(e){ if( e.clientY < 0 ) // less than 60px is close enough to the top alert('yu leave from the top?'); }

This one does not work in the old version of IE, because these versions do not report the mouse position as it should, but it is good enough.

0
source share

Here is a JS Vanilla solution if you just want something lightweight that doesn't need to work in EI

 /** * Trigger an event when the cursor leaves the top of the window * @param {*} threshold how close does it need to be to the top * @param {*} cb callback function to trigger */ function onExit (threshold, cb) { threshold = threshold || 60 var hasExited = false document.addEventListener('mouseout', function (e) { if (e.clientY < threshold && e.movementY < 0 && !hasExited) { hasExited = true cb(e) } }) }

Usage example

 onExit(20, function() { console.log('Mouse has left the top of the window!') }
0
source share

To detect mouseleave without considering the scroll bar and autocomplete field, check:

 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"); } });

Explanation of conditions:

 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

Just hold on

 event.clientY <= 0

If you want to find a way out from above

0
source share

More articles:


All Articles