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

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

Vraie réponse: non, ce n'est pas possible.

OK, je viens de penser à un moyen. Superposez votre page avec un div qui couvre tout le document. À l'intérieur, créez (disons) 2 000 x 2 000 <a>éléments (pour que la :hoverpseudo-classe fonctionne dans IE 6, voir), chaque taille de 1 pixel. Créez une :hoverrègle CSS pour les <a>éléments qui modifient une propriété (disons font-family). Dans votre gestionnaire de charge, parcourez chacun des 4 millions d' <a>éléments, en vérifiant currentStyle/ getComputedStyle()jusqu'à ce que vous trouviez celui avec la police de survol. Extrapoler à partir de cet élément pour obtenir les coordonnées dans le document.

NB NE FAITES PAS CELA .

Modifier 2020: Cela ne ne fonctionne plus. Il semble que les éditeurs de navigateurs aient corrigé cela. Parce que la plupart des navigateurs dépendent du chrome, il pourrait être dans son cœur.

Ancienne réponse: vous pouvez également accrocher mouseenter (cet événement est déclenché après le rechargement de la page, lorsque le curseur de la souris est à l'intérieur de la page). L'extension du code de Corrupted devrait faire l'affaire:

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

Vous pouvez également définir x et y à null sur mouseleave-event. Ainsi, vous pouvez vérifier si l'utilisateur est sur votre page avec son curseur.

Ce que vous pouvez faire est de créer des variables pour les xet les ycoordonnées de votre curseur, les mettre à jour chaque fois que la souris se déplace et appeler une fonction sur un intervalle de faire ce que vous avez besoin avec la position mémorisée.

L'inconvénient de cela est bien sûr qu'au moins un mouvement initial de la souris est nécessaire pour le faire fonctionner. Tant que le curseur met à jour sa position au moins une fois, nous pouvons retrouver sa position, qu'il se déplace à nouveau.

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

Le code précédent est mis à jour une fois par seconde avec un message indiquant où se trouve votre curseur. J'espère que ça aide.

Vous pouvez essayer quelque chose de similaire à ce que Tim Down a suggéré - mais au lieu d'avoir des éléments pour chaque pixel sur l'écran, créez seulement 2 à 4 éléments (boîtes) et modifiez leur emplacement, largeur, hauteur dynamiquement pour diviser les emplacements encore possibles à l'écran par 2-4 récursivement, trouvant ainsi la position réelle de la souris rapidement.

Par exemple - les premiers éléments prennent la moitié droite et gauche de l'écran, ensuite la moitié supérieure et la moitié inférieure. A présent, nous savons déjà dans quel quart d'écran la souris se trouve, sommes capables de répéter - découvrez quel quart de cet espace ...

La réponse de @Tim Down n'est pas efficace si vous effectuez un rendu de 2 000 x 2 000 <a>éléments:

OK, je viens de penser à un moyen. Superposez votre page avec un div qui couvre tout le document. À l'intérieur de cela, créez (disons) 2 000 x 2 000 éléments (pour que la pseudo-classe: hover fonctionne dans IE 6, voir), chaque taille de 1 pixel. Créez une règle CSS: hover pour les éléments qui modifient une propriété (disons police-famille). Dans votre gestionnaire de charge, parcourez chacun des 4 millions d'éléments, en vérifiant currentStyle / getComputedStyle () jusqu'à ce que vous trouviez celui avec la police hover. Extrapoler à partir de cet élément pour obtenir les coordonnées dans le document.

NB NE FAITES PAS CELA.

Mais vous n'avez pas à rendre 4 millions d'éléments à la fois, utilisez plutôt la recherche binaire. Utilisez simplement 4 <a>éléments à la place:

• Étape 1: Considérez l'ensemble de l'écran comme zone de recherche de départ
• Étape 2: diviser la zone de recherche en 2 x 2 = 4 <a>éléments rectangulaires
• Étape 3: à l'aide de la getComputedStyle()fonction, déterminez dans quel rectangle la souris survole
• Étape 4: Réduisez la zone de recherche à ce rectangle et répétez à partir de l'étape 2.

De cette façon, vous devrez répéter ces étapes au maximum 11 fois, étant donné que votre écran n'est pas plus large que 2048 pixels.

Vous générerez donc au maximum 11 x 4 = 44 <a>éléments.

Si vous n'avez pas besoin de déterminer la position de la souris exactement à un pixel, mais dites que la précision 10px est OK. Vous répéteriez les étapes au maximum 8 fois, vous devrez donc dessiner au maximum 8 x 4 = 32 <a>éléments.

De plus, la génération puis la destruction des <a>éléments ne sont pas performantes car le DOM est généralement lent. , Vous pouvez simplement réutiliser au lieu les 4 premiers <a>éléments et d' ajuster leur juste top, left, widthet heightque vous en boucle à travers les étapes.

Maintenant, créer 4 <a>est également exagéré. Au lieu de cela, vous pouvez réutiliser le même <a>élément pour les tests getComputedStyle()dans chaque rectangle. Ainsi, au lieu de diviser la zone de recherche en 2 x 2 <a>éléments réutiliser un seul <a>élément en le déplaçant avec topet leftpropriétés de style.

Donc, tout ce dont vous avez besoin est un seul <a>élément changer son widthet heightmax 11 fois, et changer son topet leftmax 44 fois et vous aurez la position exacte de la souris.

La solution la plus simple mais pas 100% précise

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

Résultat: {top: 148, left: 62.5}
Le résultat dépend de la taille de l'élément le plus proche et revient undefinedlorsque l'utilisateur a changé l'onglet

J'imagine que vous avez peut-être une page parent avec un minuteur et après un certain temps ou une tâche terminée, vous transférez l'utilisateur vers 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 des événements standard et passez 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 accèdent à cette page par d'autres moyens que votre page parent.

J'ai implémenté une recherche horizontale / verticale, (faites d'abord une division pleine de liens de ligne verticale disposés horizontalement, puis faites une division pleine de liens de ligne horizontale disposés verticalement, et voyez simplement lequel a l'état de survol) comme l'idée de Tim Down ci-dessus, et ça marche assez vite. Malheureusement, ne fonctionne pas sur Chrome 32 sur KDE.

jsfiddle.net/5XzeE/4/

Vous n'avez pas à déplacer la souris pour obtenir l'emplacement du curseur. L'emplacement est également signalé lors d'événements autres que le déplacement de la souris . Voici un événement de clic comme exemple:

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

S'appuyant sur la réponse de @ SuperNova , voici une approche utilisant des classes ES6 qui garde le contexte thiscorrect 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));

Voici ma solution. Il exporte les propriétés window.currentMouseX et window.currentMouseY que vous pouvez utiliser n'importe où. Il utilise la position d'un élément survolé (le cas échéant) initialement et écoute ensuite les mouvements de la souris pour définir les valeurs correctes.

(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
    document.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    });
}())

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

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

Je pense que je peux avoir une solution raisonnable sans compter les divs et pixels..lol

Utilisez simplement un cadre d'animation ou un intervalle de temps d'une fonction. vous aurez toujours besoin d'un événement de souris une seule fois mais juste pour l'initier, mais techniquement vous le positionnez où bon vous semble.

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