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

La vraie réponse : Non, ce n'est pas possible.

OK, je viens de penser à un moyen. Superposez votre page avec un div qui couvre l'ensemble du document. À l'intérieur de cette div, créez (disons) 2.000 x 2.000 <a> (de sorte que les :hover pseudo-classe fonctionnera dans IE 6, voir), chacun d'une taille de 1 pixel. Créez un CSS :hover règle pour ceux <a> qui modifie une propriété (disons font-family ). Dans votre gestionnaire de charge, passez en revue chacun des 4 millions de fichiers <a> éléments, vérification currentStyle / getComputedStyle() jusqu'à ce que tu trouves celle avec la police de survol. Extrapolez à partir de cet élément pour obtenir les coordonnées dans le document.

N.B. NE FAITES PAS ÇA .

Answer 2

Réponse courte : Non

Réponse longue : Noooooooooooooooooooooooooo

Réponse réelle : JavaScript ne dispose pas [encore ?] d'une API permettant d'interroger l'état de la souris (ou du clavier). Une façon d'accomplir ceci (connaître l'état de la souris - boutons en haut/en bas, position du curseur, etc.) est d'avoir des variables qui gardent la trace de chaque état, puis de mettre à jour ces variables par le biais de rappels de gestionnaires d'événements.

Exemple :

var mouse = {x: 0, y: 0};

document.addEventListener('mousemove', function(e){ 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY 
}, false);

De cette façon, chaque fois que vous voulez savoir où se trouve la souris, il suffit de regarder l'icône de la souris. mouse objet. Notez que lors du chargement initial de la page, à moins que la souris ne se soit déplacée, cette solution ne vous indique pas où se trouve réellement la souris.

Answer 3

Edit 2020 : Cela ne pas plus de travail. Il semble que les vendeurs de navigateurs aient corrigé ce problème. Comme la plupart des navigateurs reposent sur Chrome, il se peut que ce soit dans son noyau.

Ancienne réponse : Vous pouvez aussi hooker 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.

Answer 4

Ce que vous pouvez faire, c'est créer des variables pour les x y y de votre curseur, les mettre à jour chaque fois que la souris se déplace et appeler une fonction sur un intervalle pour faire ce dont vous avez besoin avec la position stockée.

L'inconvénient, bien sûr, est qu'il faut au moins un mouvement initial de la souris pour que cela fonctionne. Tant que le curseur met à jour sa position au moins une fois, nous sommes en mesure de trouver sa position, qu'il se déplace à nouveau ou non.

var cursor_x = -1;
var cursor_y = -1;
document.onmousemove = function(event)
{
 cursor_x = event.pageX;
 cursor_y = event.pageY;
}
setInterval(check_cursor, 1000);
function check_cursor(){console.log('Cursor at: '+cursor_x+', '+cursor_y);}

Le code précédent se met à jour une fois par seconde avec un message indiquant où se trouve votre curseur. J'espère que cela vous aidera.

Answer 5

La réponse de @Tim Down n'est pas performante 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 qui couvre l'ensemble du document. À l'intérieur, créez (disons) 2 000 x 2 000 éléments (pour que la pseudo-classe :hover fonctionne dans IE 6, voir), d'une taille de 1 pixel chacun. Créez une règle CSS :hover pour ces éléments qui modifie une propriété (disons font-family). Dans votre gestionnaire de chargement, passez en revue chacun des 4 millions d'éléments, en vérifiant que currentStyle / getComputedStyle() jusqu'à ce que vous trouviez celui qui possède la police de survol. Extrapolez à partir de cet élément pour obtenir les coordonnées dans le document.

N.B. NE FAITES PAS ÇA.

Mais il n'est pas nécessaire de rendre 4 millions d'éléments en une seule fois, utilisez plutôt la recherche binaire. Il suffit d'utiliser 4 <a> à la place :

• Étape 1 : Considérez l'ensemble de l'écran comme la zone de recherche de départ.
• Étape 2 : diviser la zone de recherche en 2 x 2 = 4 rectangles. <a> éléments
• Étape 3 : Utilisation du getComputedStyle() fonction déterminant dans quel rectangle la souris se trouve
• Étape 4 : réduisez la zone de recherche à ce rectangle et répétez l'étape 2.

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

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

Si vous n'avez pas besoin de déterminer la position de la souris au pixel près, une précision de 10px est acceptable. Vous répéteriez les étapes au maximum 8 fois, donc vous auriez besoin de dessiner au maximum 8 x 4 = 32. <a> éléments.

En outre, la génération puis la destruction de la <a> n'est pas performant car DOM est généralement lent. Au lieu de cela, vous pouvez simplement réutiliser les 4 éléments initiaux de la base de données. <a> et ajuster simplement leurs top , left , width y height pendant que vous passez en boucle les étapes.

Maintenant, en créant 4 <a> est aussi une surenchère. Au lieu de cela, vous pouvez réutiliser le même <a> lors des tests de getComputedStyle() dans chaque rectangle. Ainsi, au lieu de diviser la zone de recherche en 2 x 2 <a> réutilisent simplement un seul <a> en le déplaçant avec top y left les propriétés de style.

Donc, tout ce dont vous avez besoin est un simple <a> modifie son width y height max 11 fois, et modifier son top y left max 44 fois et vous aurez la position exacte de la souris.