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

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?

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

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