Bestimmen Sie, ob sich eine Mausposition in der Nähe der Ränder des Browsers befindet

Question

In einem Browser versuche ich festzustellen, ob der Punkt, der die Mausposition darstellt, in einer "Außenfläche" befindet. Zum Beispiel ist im angeschlossenen Bild der äußere Bereich mit einem blauen Hintergrund.

Im Code und Bild repräsentiert W die Breite des Ansichtsfensters des Browsers, während H die Höhe und x y für die Mausposition darstellt

Im Moment verwende ich diesen Code, um es zu tun:

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

Während es so funktioniert, wie es ist, frage ich mich, ob es einen besseren Weg gibt?

Answer 1

Sie müssen nicht überprüfen, ob es mehr als 0 und weniger als W ist, da die Position der Zeiger X nicht weniger als 0 oder mehr als W betragen kann. Das gleiche gilt für die Y -Achse. Das Folgende sollte ausreichen:

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

Answer 2

Sie könnten Ihre ganze Seite in eine DIV einwickeln (genannt outer) und dann eine Verbindung zu dem herstellen hover Veranstaltung.