Javascript Girl
  1. Javascript Girl
  3. Suivre la vitesse de la souris avec JS
Intereting Posts
Comment se défiler lorsque le curseur est sur le bord du div? Pourquoi mettre JavaScript en tête Node.js – chargement du module asynchrone Obtenez une couleur de pixel de la toile, sur mouseover Condition de course AJAX GET? La liaison de l'événement OnClick dans React.js Javascript ne capture pas l'erreur dans l'instanciation WebSocket Comment capturer un événement proche du navigateur? Objet JSON avec ou sans devis Développement de plugin jQuery – passer des paramètres à la fonction de rappel appelée par l'utilisateur Comment est-ce que MySQL bit data type php print unicode? Corrigez un caractère à la zone de saisie de texte à l'aide de javascript / jquery «Ceci» ne fonctionne pas correctement dans un autre événement. Je ne sais pas pourquoi pourquoi PostMessage avec plusieurs fonctions ou rappels personnalisés Firefox – Comment listez-vous les extensions installées et identifiez-les dans une liste?

Suivre la vitesse de la souris avec JS

Quelle est la meilleure façon de suivre la vitesse de la souris avec JS / JQuery? Je voudrais suivre à quelle vitesse un utilisateur déplace la souris dans toutes les directions (haut / bas / gauche / droite).

Sparklines a un bon exemple de suivi du mouvement de la souris et de sa représentation graphique. Leur code est disponible dans la source de leur site à partir de la ligne 315.

Simple et efficace.

Voici le code: 

var mrefreshinterval = 500; // update display every 500ms var lastmousex=-1; var lastmousey=-1; var lastmousetime; var mousetravel = 0; $('html').mousemove(function(e) { var mousex = e.pageX; var mousey = e.pageY; if (lastmousex > -1) mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) ); lastmousex = mousex; lastmousey = mousey; });

De même, vous obtenez de la vitesse pour toute autre chose: 

 speed = distance / time acceleration = speed / time

Et utilise: 

  $(document).mousemove(function(e){ var xcoord = e.pageX; var ycoord = e.pageY; });

Pour obtenir les coordonnées de la souris chaque fois que la souris se déplace. 

 var timestamp = null; var lastMouseX = null; var lastMouseY = null; document.body.addEventListener("mousemove", function(e) { if (timestamp === null) { timestamp = Date.now(); lastMouseX = e.screenX; lastMouseY = e.screenY; return; } var now = Date.now(); var dt = now - timestamp; var dx = e.screenX - lastMouseX; var dy = e.screenY - lastMouseY; var speedX = Math.round(dx / dt * 100); var speedY = Math.round(dy / dt * 100); timestamp = now; lastMouseX = e.screenX; lastMouseY = e.screenY; });

Il s'agit d'une méthode pour contrer le fait que vous pourriez commencer à suivre, faire une pause, puis déplacer votre doigt ou votre souris très rapidement (supposons un flick soudain sur un écran tactile). 

 var time = 200 var tracker = setInterval(function(){ historicTouchX = touchX; }, time); document.addEventListener("touchmove", function(){ speed = (historicTouchX - touchX) / time; console.log(Math.abs(speed)); }, false);

Je l'ai fait avec seulement touchX dans cet exemple. L'idée est de prendre un instantané de la position x tous les 200 millisecondes, puis de le prendre à partir de la position actuelle, puis diviser par 200 (vitesse = distance / heure). Cela permettrait de garder une nouvelle mise à jour sur la vitesse. Le temps est en millisecondes et la sortie serait le nombre de pixels parcourus par 200 millisecondes.