web-dev-qa-db-fra.com

Déterminer la position de la souris en dehors des événements (à l'aide de jQuery)?

J'ai besoin d'obtenir la position/coordonnées absolues de la souris (X et Y) en utilisant (de préférence) jQuery comme dans ce tutoriel mais en dehors de tout événement JavaScript. Je vous remercie.

jqueryevent-handlingmouseposition
38
pbz

Pas possible. Vous pouvez cependant utiliser la même approche dans le didacticiel pour stocker la position dans une variable globale et la lire en dehors de l'événement.

Comme ça:

jQuery(document).ready(function(){
   $().mousemove(function(e){
      window.mouseXPos = e.pageX;
      window.mouseYPos = e.pageY;
   }); 
})

Vous pouvez maintenant utiliser window.mouseXPos et window.mouseYPos de partout.

47
Chetan Sastry

Cela a commencé comme un commentaire sur réponse de Chetan Sastry , mais j'ai réalisé que cela pourrait aussi valoir la peine d'être publié comme réponse:

Je ferais attention à ne pas avoir d'événement mousemove au niveau du document, toujours en cours d'exécution, même si vous interrogez uniquement la position du curseur. C'est beaucoup de traitement et peut embourber n'importe quel navigateur, en particulier les plus lents comme IE.

Un problème comme celui-ci soulève presque certainement la question de la décision de conception: si vous n'avez pas besoin de gérer un événement de souris pour interroger la position du curseur, avez-vous vraiment besoin de la position du curseur? Existe-t-il une meilleure façon de résoudre le problème que vous essayez de résoudre?

Edit: même dans Safari 4, qui est (euphémisme) très rapide , cet événement unique mousemove rend sensiblement chaque interaction avec cette page de didacticiel agité pour moi. Réfléchissez à la façon dont cela affectera la perception qu'ont les utilisateurs de votre site ou application.

29
eyelidlessness

Cette fonction diminuera l'impact sur les performances de l'interface utilisateur en obtenant uniquement la position de la souris à un intervalle:

function getMousePosition(timeoutMilliSeconds) {
    // "one" attaches the handler to the event and removes it after it has executed once 
    $(document).one("mousemove", function (event) {
        window.mouseXPos = event.pageX;
        window.mouseYPos = event.pageY;
        // set a timeout so the handler will be attached again after a little while
        setTimeout(function() { getMousePosition(timeoutMilliSeconds) }, timeoutMilliseconds);
    });
}

// start storing the mouse position every 100 milliseconds
getMousePosition(100);

Tout comme dans l'autre réponse "Vous pouvez maintenant utiliser window.mouseXPos et window.mouseYPos de partout."

Vous perdez un peu de précision car le déplacement de la souris ne sera pas détecté pendant les intervalles.

10
Wahtah

J'ai essayé la soulution de @Chetan Sastry, mais cela ne fonctionne pas (j'utilise jQuery 1.6.4). Je change le code et je travaille maintenant. Voici mon code. J'espère que cela vous aidera.



    $(document).ready(function(){
       $(document).mousemove(function(e){
          window.mouseXPos = e.pageX;
          window.mouseYPos = e.pageY;
       }); 
    });
1
Sword-Breaker