Detect when the mouse leaves the top of the viewport?

Question

I want to detect when the mouse leaves the viewport on top (to the north so to say). I searched the net and came up with How can I detect when the mouse leaves the window?. Is a good start, but it also detects when the mouse leaves to other directions. How could I only detect the exit on top?

Thanks!

Track the position and put a guard on the last known position after detecting that the mouse left the window. — Brian Cain, Sep 30 '14 at 14:56
You'll need to tell us which language and platform you're using if you want a useful answer. Please edit the tags of the question with that information. Thanks. — Toby Speight, Aug 31 '15 at 17:17

score 7 · Answer 1 · edited May 27 '23 at 14:53

In order to detect mouseleave without taking in account the scroll bar and the autcomplete field :

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

Then you just have to delete 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

score 3 · Answer 2 · answered Aug 31 '15 at 15:45

3

Use this plugin: https://github.com/carlsednaoui/ouibounce

It fires an event when the mouse moves out of the top viewport.

answered Aug 31 '15 at 15:45

bperdue

474
1
6
18

Detect when the mouse leaves the top of the viewport?

2 Answers2