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

Hier ist meine Lösung. Sie exportiert window.currentMouseX y window.currentMouseY Eigenschaften, die Sie überall nutzen können. Es verwendet zunächst die Position eines schwebenden Elements (falls vorhanden) und achtet dann auf Mausbewegungen, um die richtigen Werte zu setzen.

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll(':hover');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element's position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    window.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    }, /*useCapture=*/true);
}())

Composr CMS Quelle: https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202

Answer 2

Die einfachste Lösung, aber nicht 100% genau

$(':hover').last().offset()

Ergebnis: {top: 148, left: 62.5}
Das Ergebnis hängt von der nächstgelegenen Elementgröße ab und gibt undefined wenn der Benutzer die Registerkarte wechselt

Answer 3

Ja, das ist möglich.

Wenn Sie dem Dokument ein "Mouseover"-Ereignis hinzufügen, wird es sofort ausgelöst und Sie können die Mausposition ermitteln, natürlich nur, wenn sich der Mauszeiger über dem Dokument befindet.

   document.addEventListener('mouseover', setInitialMousePos, false);

   function setInitialMousePos( event ) {
       console.log( event.clientX, event.clientY);
       document.removeEventListener('mouseover', setInitialMousePos, false);
   }

Zuvor war es möglich, die Mausposition über window.event aber das ist jetzt veraltet.

Answer 4

var x = 0;
var y = 0;

document.addEventListener('mousemove', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}

Answer 5

Ich habe eine horizontale/vertikale Suche implementiert (zuerst ein Div voller vertikaler Links, die horizontal angeordnet sind, dann ein Div voller horizontaler Links, die vertikal angeordnet sind, und einfach sehen, welches den Hover-Status hat) wie Tim Downs Idee oben, und es funktioniert ziemlich schnell. Leider funktioniert es nicht auf Chrome 32 auf KDE.

jsfiddle.net/5XzeE/4/