Comment obtenir la position de la souris sans événements (sans déplacer la souris) ?

Question

Est-il possible d'obtenir la position de la souris avec JavaScript après le chargement de la page sans événement de mouvement de la souris (sans déplacer la souris) ?

Answer 1

Riffing sur La réponse de @SuperNova Voici une approche qui utilise les classes ES6 et qui conserve le contexte pour les éléments suivants this correct dans votre rappel :

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 2

Pas la position de la souris, mais, si vous recherchez position actuelle du curseur (pour des cas d'utilisation tels que l'obtention du dernier caractère tapé, etc.), l'extrait ci-dessous fonctionne bien.
Cela vous donnera l'index du curseur lié au contenu du texte.

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

Answer 3

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 4

J'imagine que vous avez peut-être une page parent avec une minuterie et qu'après un certain temps ou une tâche accomplie, vous faites passer l'utilisateur à une nouvelle page. Maintenant, vous voulez la position du curseur, et parce qu'ils attendent, ils ne touchent pas nécessairement la souris. Suivez donc la souris sur la page parent en utilisant les événements standard et transmettez la dernière valeur à la nouvelle page dans une variable get ou post.

Vous pouvez utiliser le code de JHarding sur votre page parent afin que la dernière position soit toujours disponible dans une variable globale :

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

Cela n'aidera pas les utilisateurs qui naviguent vers cette page par d'autres moyens que votre page parent.

Answer 5

Je pense avoir trouvé une solution raisonnable sans compter les divs et les pixels lol

Il suffit d'utiliser un cadre d'animation ou un intervalle de temps d'une fonction. Vous aurez toujours besoin d'un événement de souris une fois, juste pour l'initier, mais techniquement, vous pouvez le positionner où vous voulez.

Essentiellement, nous suivons un div factice à tout moment, sans mouvement de souris.

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

Voici la logique

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);
}