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

Sie müssen nicht umziehen die Maus, um die Position des Cursors zu ermitteln. Die Position wird auch bei anderen Ereignissen als mousemove . Hier ist ein Klick-Ereignis als Beispiel:

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

Answer 2

In Anlehnung an @SuperNovas Antwort Hier ist ein Ansatz mit ES6-Klassen, der den Kontext für this korrekt in Ihrem Rückruf:

class Mouse {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.callbacks = {
      mouseenter: [],
      mousemove: [],
    };
  }

  get xPos() {
    return this.x;
  }

  get yPos() {
    return this.y;
  }

  get position() {
    return `${this.x},${this.y}`;
  }

  addListener(type, callback) {
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct
    this.callbacks[type].push(callback);
  }

  // `handleEvent` is part of the browser's `EventListener` API.
  // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
  handleEvent(event) {
    const isMousemove = event.type === 'mousemove';
    const isMouseenter = event.type === 'mouseenter';

    if (isMousemove || isMouseenter) {
      this.x = event.pageX;
      this.y = event.pageY;
    }

    this.callbacks[event.type].forEach((callback) => {
      callback();
    });
  }
}

const mouse = new Mouse();

mouse.addListener('mouseenter', () => console.log('mouseenter', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove A', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove B', mouse.position));

Answer 3

Nicht die Position der Maus, aber wenn Sie auf der Suche nach aktuelle Cursor-Position (für Anwendungsfälle wie immer letzte getippte Zeichen usw.) dann, unten Snippet funktioniert gut.
So erhalten Sie den Cursor-Index für den Textinhalt.

window.getSelection().getRangeAt(0).startOffset

Answer 4

Ich stelle mir vor, dass Sie vielleicht eine übergeordnete Seite mit einem Timer haben, und nach einer bestimmten Zeit oder nach Abschluss einer Aufgabe leiten Sie den Benutzer auf eine neue Seite weiter. Jetzt wollen Sie die Cursorposition, und weil sie warten, sind sie nicht unbedingt berühren 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 Code von JHarding auf Ihrer übergeordneten Seite verwenden, so dass die neueste Position immer in einer globalen Variablen verfügbar ist:

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

Dies hilft Benutzern nicht, die auf diese Seite über andere Wege als die übergeordnete Seite gelangen.

Answer 5

Ich glaube, ich habe eine vernünftige Lösung, ohne Divs und Pixel zu zählen lol

Verwenden Sie einfach Animation Frame oder ein Zeitintervall von einer Funktion. Sie werden immer noch ein Maus-Ereignis einmal aber nur zu initiieren, aber technisch können Sie diese Position, wo immer Sie wollen.

Im Wesentlichen sind wir Tracking ein Dummy-Div zu allen Zeiten mit Mausbewegung aus.

// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

Im Folgenden finden Sie die Logik.

var x,y;

$('body').mousemove(function( e ) {

    var x = e.clientX - (window.innerWidth / 2);
    var y = e.clientY - (window.innerHeight / 2);
 }

function looping (){

   /* track my div position 60 x 60 seconds!
      with out the mouse after initiation you can still track the dummy div.x & y
      mouse doesn't need to move.*/

   $('#mydiv').x = x;    // css transform x and y to follow 
   $('#mydiv)'.y = y;

   console.log(#mydiv.x etc)

   requestAnimationFrame( looping , frame speed here);
}