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?

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?

• javascript
• browser
• mouse-position

Share Improve this question Follow edited May 1, 2019 at 1:05 Glorfindel 22.7k1313 gold badges8989 silver badges119119 bronze badges asked Oct 15, 2009 at 8:51 ivbivb 16711 silver badge1313 bronze badges 2

• Can I ask you what you're going to make? Is it some kind of "scroll on edge" thing like in most RTS games? – Boris Callens Commented Oct 15, 2009 at 9:08
• No. The page won't scroll with the mouse. It's more like I want to set up some data when the mouse is in the outer area. – ivb Commented Oct 15, 2009 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.