Reputation: 167
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?
Upvotes: 5
Views: 2182
Reputation: 328614
You could wrap your whole page into a DIV (called outer
) and then connect to the hover
event.
Upvotes: 4
Reputation: 58931
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");
}
Upvotes: 5