Wie kann man die Mausposition ohne Ereignisse ermitteln (ohne die Maus zu bewegen)?

Question

Ist es möglich, die Mausposition mit JavaScript nach dem Laden der Seite ohne Mausbewegungsereignis zu ermitteln (ohne die Maus zu bewegen)?

Answer 1

Die richtige Antwort: Nein, das ist nicht möglich.

OK, ich habe gerade eine Lösung gefunden. Überlagern Sie Ihre Seite mit einem Div, das sich über das gesamte Dokument erstreckt. Innerhalb dieses Divs erstellen Sie (sagen wir) 2.000 x 2.000 <a> Elemente (so dass die :hover Pseudoklasse funktioniert im IE 6, siehe), jeweils 1 Pixel groß. Erstellen Sie ein CSS :hover Regel für diejenigen <a> Elemente, die eine Eigenschaft ändern (z. B. font-family ). In Ihrem Load-Handler durchlaufen Sie jede der 4 Millionen <a> Elemente, Überprüfung currentStyle / getComputedStyle() bis Sie diejenige mit der Schwebeschrift finden. Extrapolieren Sie von diesem Element zurück, um die Koordinaten innerhalb des Dokuments zu erhalten.

N.B.. TUN SIE DAS NICHT .

Answer 2

Bearbeiten 2020: Dies bedeutet no nicht mehr funktionieren. Es sieht so aus, als ob die Browserhersteller dieses Problem behoben haben. Da die meisten Browser auf Chromium basieren, könnte es in dessen Kern liegen.

Alte Antwort: Sie können auch einen Hook für mouseenter setzen (dieses Ereignis wird nach dem Neuladen der Seite ausgelöst, wenn sich der Mauszeiger innerhalb der Seite befindet). Erweitern Sie den Code von Corrupted sollte den Trick tun:

var x = null;
var y = null;

document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);

function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

Sie können auch x und y auf null setzen, wenn Sie die Maus verlassen. So können Sie überprüfen, ob sich der Benutzer mit seinem Cursor auf Ihrer Seite befindet.

Answer 3

Was Sie tun können, ist die Erstellung von Variablen für die x y y Koordinaten Ihres Cursors, aktualisieren Sie sie bei jeder Mausbewegung und rufen Sie eine Funktion in einem bestimmten Intervall auf, um die gespeicherte Position zu bearbeiten.

Der Nachteil dabei ist natürlich, dass mindestens eine erste Bewegung der Maus erforderlich ist, damit es funktioniert. Solange der Cursor seine Position mindestens einmal aktualisiert, können wir seine Position finden, unabhängig davon, ob er sich erneut bewegt.

var cursor_x = -1;
var cursor_y = -1;
document.onmousemove = function(event)
{
 cursor_x = event.pageX;
 cursor_y = event.pageY;
}
setInterval(check_cursor, 1000);
function check_cursor(){console.log('Cursor at: '+cursor_x+', '+cursor_y);}

Der vorangehende Code wird einmal pro Sekunde mit einer Meldung darüber aktualisiert, wo sich der Cursor befindet. Ich hoffe, das hilft.

Answer 4

Die Antwort von @Tim Down ist nicht performant, wenn Sie 2.000 x 2.000 <a> Elemente:

OK, ich habe gerade eine Lösung gefunden. Überlagern Sie Ihre Seite mit einem Div, das das das gesamte Dokument abdeckt. Erstellen Sie innerhalb dieses Divs ( Elemente (damit die :hover-Pseudoklasse im IE 6 funktioniert, siehe), jedes ist 1 Pixel groß. Erstellen Sie eine CSS :hover-Regel für diese Elemente die eine Eigenschaft ändert (z.B. font-family). In Ihrem Load-Handler, durchlaufen Sie currentStyle / getComputedStyle(), bis Sie das Element mit der Hover-Schriftart. Extrapolieren Sie von diesem Element zurück, um die Koordinaten zu erhalten innerhalb des Dokuments.

N.B. TUN SIE DAS NICHT.

Sie müssen aber nicht 4 Millionen Elemente auf einmal rendern, sondern können stattdessen die binäre Suche verwenden. Verwenden Sie einfach 4 <a> Elemente stattdessen:

• Schritt 1: Betrachten Sie den gesamten Bildschirm als Ausgangsbereich für die Suche
• Schritt 2: Teilen Sie den Suchbereich in 2 x 2 = 4 Rechtecke <a> Elemente
• Schritt 3: Mit Hilfe des getComputedStyle() Funktion zur Bestimmung des Rechtecks, in dem sich die Maus befindet
• Schritt 4: Reduzieren Sie den Suchbereich auf dieses Rechteck und wiederholen Sie den Vorgang ab Schritt 2.

Auf diese Weise müssten Sie diese Schritte maximal 11 Mal wiederholen, da Ihr Bildschirm nicht breiter als 2048 Pixel ist.

Sie werden also maximal 11 x 4 = 44 erzeugen. <a> Elemente.

Wenn Sie die Mausposition nicht pixelgenau bestimmen müssen, ist eine Genauigkeit von z.B. 10px in Ordnung. Sie würden die Schritte höchstens 8 Mal wiederholen, also müssten Sie maximal 8 x 4 = 32 zeichnen <a> Elemente.

Auch die Erzeugung und anschließende Zerstörung der <a> Elemente ist nicht performat, da DOM im Allgemeinen langsam ist. Stattdessen können Sie einfach die anfänglichen 4 Elemente wiederverwenden <a> Elemente und passen einfach ihre top , left , width y height während Sie die Schritte durchlaufen.

Nun, die Erstellung von 4 <a> ist ebenfalls ein Overkill. Stattdessen können Sie denselben wiederverwenden <a> Element bei der Prüfung auf getComputedStyle() in jedem Rechteck. Anstatt also den Suchbereich in 2 x 2 zu unterteilen <a> Elemente nur ein einziges Element wiederverwenden <a> Element durch Verschieben mit top y left Stil-Eigenschaften.

Alles, was Sie also brauchen, ist eine einzige <a> Element ändert seine width y height max. 11 Mal, und ändern Sie seine top y left maximal 44 Mal und Sie haben die genaue Mausposition.

Answer 5

Sie könnten etwas Ähnliches versuchen, wie Tim Down vorgeschlagen hat - aber anstatt Elemente für jedes Pixel auf dem Bildschirm zu haben, erstellen Sie nur 2-4 Elemente (Boxen), und ändern Sie ihre Position, Breite, Höhe dynamisch, um die noch möglichen Positionen auf dem Bildschirm rekursiv durch 2-4 zu teilen und so die tatsächliche Position der Maus schnell zu finden.

Zum Beispiel - die ersten Elemente nehmen die rechte und linke Hälfte des Bildschirms ein, danach die obere und untere Hälfte. Jetzt wissen wir schon, in welchem Viertel des Bildschirms sich die Maus befindet, und können wiederholen, in welchem Viertel dieses Raums sie sich befindet...