Determining if a mouse position is near the edges of the browser

Question

Hi there,

In a browser, I'm trying to determine if the point representing the mouse position is in what I call an "outer area" . For example, in the image attached, the outer area is the one with a blue background.

In the code and image W represents the width of the viewport of the browser, while H represents the height, and x,y for mouse position

Right now, I'm using this piece of code to do it:

if (((x>0 && x<w1) || (x>w2 && x<W))
    ||
    ((x>w1 && x<w2) &&
      ((y>0 && y<h1) || (y>h2 && y<H))
    ))
    console.log("we are in the outer area")

While it works as it is, I'm wondering if is there any better way to it?

Answer 1

You don't need to check if it is more than 0 and less than W, since the pointer x position can't be less than 0 or more than W. The same applies to the Y axis. The following should be enough:

if((x>w2 || x<w1) || (y>h2 || y<h1)){
  console.log("We are in the outer area");
}

Answer 2

You could wrap your whole page into a DIV (called outer) and then connect to the hover event.