Ist es möglich, die Mausposition mit JavaScript nach dem Laden der Seite ohne Mausbewegungsereignis (ohne Bewegung der Maus) zu ermitteln?
javascript
mouseevent
dom-events
Norbert Tamas
quelle
quelle
mousemove
Ereignisse verlangsamen .Antworten:
Richtige Antwort: Nein, das ist nicht möglich.
OK, ich habe gerade über einen Weg nachgedacht. Überlagern Sie Ihre Seite mit einem Div, der das gesamte Dokument abdeckt. Erstellen Sie darin beispielsweise 2.000 x 2.000
<a>
Elemente (damit die:hover
Pseudoklasse in IE 6 funktioniert, siehe), die jeweils 1 Pixel groß sind. Erstellen Sie eine CSS-:hover
Regel für die<a>
Elemente, die eine Eigenschaft ändern (z. B.font-family
). Durchlaufen Sie in Ihrem Load-Handler jedes der 4 Millionen<a>
Elemente und überprüfen SiecurrentStyle
/,getComputedStyle()
bis Sie das Element mit der Hover-Schriftart finden. Extrapolieren Sie von diesem Element zurück, um die Koordinaten innerhalb des Dokuments zu erhalten.NB TUN SIE DAS NICHT .
quelle
<a>
, das bestimmte Rechtecke abdeckt (<img>
vermutlich unter absoluter Positionierung von Größenelementen), wobei die Rechtecke jedes Mal verkleinert werden. Ja, es ist lächerlich, aber es ist nicht möglich, diese Informationen vor dem ersten Mauszug zu erhalten.Edit 2020: Das funktioniert nicht mehr. Es scheint so, dass die Browser-Anbieter dies behoben haben. Da die meisten Browser auf Chrom setzen, befindet es sich möglicherweise in seinem Kern.
Alte Antwort: Sie können auch mouseenter einbinden (dieses Ereignis wird nach dem erneuten Laden der Seite ausgelöst, wenn sich der Mauszeiger innerhalb der Seite befindet). Das Erweitern des Codes von Corrupted sollte den Trick machen:
Sie können x und y auch bei einem Mausblattereignis auf null setzen. So können Sie mit dem Cursor überprüfen, ob sich der Benutzer auf Ihrer Seite befindet.
quelle
mouseleave
Fall , dass Sätzex
undy
zurück zunull
oder'undefined'
Sie können Variablen für die
x
und diey
Koordinaten Ihres Cursors erstellen , diese aktualisieren, wenn sich die Maus bewegt, und eine Funktion in einem Intervall aufrufen, um mit der gespeicherten Position das zu tun, was Sie benötigen.Der Nachteil dabei ist natürlich, dass mindestens eine erste Bewegung der Maus erforderlich ist, damit sie funktioniert. Solange der Cursor seine Position mindestens einmal aktualisiert, können wir seine Position finden, unabhängig davon, ob er sich wieder bewegt.
Der vorhergehende Code wird einmal pro Sekunde mit einer Meldung aktualisiert, wo sich Ihr Cursor befindet. Ich hoffe das hilft.
quelle
cursorX/Y
Variablen zu füllen , bevor ein Ereignis eintritt.Sie könnten etwas Ähnliches ausprobieren, wie Tim Down vorgeschlagen hat - aber anstatt Elemente für jedes Pixel auf dem Bildschirm zu haben, erstellen Sie nur 2-4 Elemente (Kästchen) und ändern Sie deren Position, Breite und Höhe dynamisch, um die noch möglichen Positionen auf dem Bildschirm zu teilen um 2-4 rekursiv, wodurch die reale Position der Maus schnell gefunden wird.
Zum Beispiel - erste Elemente nehmen die rechte und linke Hälfte des Bildschirms ein, danach die obere und untere Hälfte. Inzwischen wissen wir bereits, in welchem Viertel des Bildschirms sich die Maus befindet, können wiederholen - entdecken Sie, welches Viertel dieses Raumes ...
quelle
Die Antwort von @Tim Down ist nicht performant, wenn Sie 2.000 x 2.000
<a>
Elemente rendern :Sie müssen jedoch nicht 4 Millionen Elemente gleichzeitig rendern, sondern die binäre Suche verwenden. Verwenden Sie
<a>
stattdessen einfach 4 Elemente:<a>
ElementegetComputedStyle()
Bestimmen Sie mithilfe der Funktion, in welchem Rechteck sich die Maus befindetAuf diese Weise müssten Sie diese Schritte maximal elf Mal wiederholen, da Ihr Bildschirm nicht breiter als 2048 Pixel ist.
Sie generieren also maximal 11 x 4 = 44
<a>
Elemente.Wenn Sie die Mausposition nicht genau auf ein Pixel genau bestimmen müssen, aber sagen, dass eine Genauigkeit von 10 Pixel in Ordnung ist. Sie würden die Schritte höchstens 8 Mal wiederholen, sodass Sie maximal 8 x 4 = 32
<a>
Elemente zeichnen müssten .Auch das Erzeugen und anschließende Zerstören der
<a>
Elemente wird nicht ausgeführt, da DOM im Allgemeinen langsam ist. Stattdessen können Sie nur die ersten 4 wiederzuverwenden<a>
Elemente und nur ihre anpassentop
,left
,width
undheight
wie Sie Schleife durch die Schritte.Jetzt ist das Erstellen von 4 ebenfalls
<a>
ein Overkill. Stattdessen können Sie dasselbe<a>
Element beim TestengetComputedStyle()
in jedem Rechteck wiederverwenden . Anstatt den Suchbereich in 2 x 2<a>
Elemente aufzuteilen, verwenden Sie einfach ein einzelnes<a>
Element, indem Sie es mit den Stil-top
undleft
Stileigenschaften verschieben.Alles, was Sie brauchen, ist ein einzelnes
<a>
Element, das seinewidth
undheight
max 11-mal und seinetop
undleft
max 44-mal ändert, und Sie haben die genaue Mausposition.quelle
Die einfachste Lösung, aber nicht 100% genau
Ergebnis:
{top: 148, left: 62.5}
Das Ergebnis hängt von der nächstgelegenen Elementgröße ab und wird zurückgegeben,
undefined
wenn der Benutzer die Registerkarte wechseltquelle
undefined
trotzdem zurück. Können Sie erläutern, wie dies zu verwenden ist?undefined
wenn der Cursor kein Element bewegt (oder wenn der Browser den Fokus verloren hat). Möglicherweise müssen Sie ein Zeitintervall festlegen, wenn Sie von der Konsole aus testen.setTimeout
hat funktioniert. Ich habe jsfiddle verwendet und Sie haben Recht, es hat nie ein Schwebeflugereignis getroffen, da es das DOM jedes Mal neu zeichnet, wenn Sie auf Wiedergabe klicken. Ich würde empfehlen, diesen Hinweis für andere hinzuzufügen.Ich stelle mir vor, dass Sie möglicherweise eine übergeordnete Seite mit einem Timer haben und den Benutzer nach einer bestimmten Zeit oder nach Abschluss einer Aufgabe auf eine neue Seite weiterleiten. Jetzt möchten Sie die Cursorposition und weil sie warten, berühren sie nicht unbedingt die Maus. Verfolgen Sie also die Maus auf der übergeordneten Seite mithilfe von Standardereignissen und übergeben Sie den letzten Wert in einer get- oder post-Variablen an die neue Seite.
Sie können den JHarding-Code auf Ihrer übergeordneten Seite verwenden, sodass die neueste Position immer in einer globalen Variablen verfügbar ist:
Dies hilft Benutzern nicht, die mit anderen Mitteln als Ihrer übergeordneten Seite zu dieser Seite navigieren.
quelle
Ich habe eine horizontale / vertikale Suche implementiert (erst ein Div voller vertikal angeordneter vertikaler Linienverknüpfungen, dann ein Div voll vertikal angeordneter horizontaler Linienverknüpfungen und einfach sehen, welche den Schwebezustand hat), wie Tim Downs Idee oben, und es funktioniert ziemlich schnell. Funktioniert leider nicht auf Chrome 32 unter KDE.
jsfiddle.net/5XzeE/4/
quelle
Sie müssen die Maus nicht bewegen , um die Position des Cursors zu ermitteln. Der Standort wird auch über andere Ereignisse als Mausbewegungen gemeldet . Hier ist ein Klickereignis als Beispiel:
quelle
In Anlehnung an die Antwort von @ SuperNova finden Sie hier einen Ansatz, bei dem ES6-Klassen verwendet werden, um den Kontext
this
in Ihrem Rückruf korrekt zu halten:quelle
Hier ist meine Lösung. Es exportiert die Eigenschaften window.currentMouseX und window.currentMouseY, die Sie überall verwenden können. Es verwendet zunächst die Position eines schwebenden Elements (falls vorhanden) und hört anschließend Mausbewegungen ab, um die richtigen Werte festzulegen.
Composr CMS- Quelle: https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202
quelle
quelle
Ich denke, ich habe vielleicht eine vernünftige Lösung, ohne Divs und Pixel zu zählen
Verwenden Sie einfach einen Animationsrahmen oder ein Zeitintervall einer Funktion. Sie benötigen zwar einmal ein Mausereignis, um es zu initiieren, aber technisch positionieren Sie dieses, wo immer Sie möchten.
Im Wesentlichen verfolgen wir jederzeit ein Dummy-Div ohne Mausbewegung.
Unten ist die Logik ..
quelle