¿Cuál es la mejor manera de rastrear la velocidad del mouse con JS / JQuery simple? Me gustaría hacer un seguimiento de la rapidez con que un usuario mueve el mouse en todas las direcciones (arriba / abajo / izquierda / derecha).

19
dandoen 21 jun. 2011 a las 00:25

4 respuestas

La mejor respuesta

Sparklines tiene un ingenioso ejemplo de rastrear el movimiento del mouse y graficarlo. Su código está disponible en la fuente de su sitio a partir de la línea 315.

Sencilla y efectiva.

Aquí está el código:

 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;
 });
14
Charlotte 15 mar. 2012 a las 21:54

De la misma manera que obtienes velocidad para cualquier otra cosa:

speed = distance / time

acceleration = speed / time 

Y use:

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

Para obtener las coordenadas del mouse cuando el mouse se mueve.

7
Connor Smith 20 jun. 2011 a las 20:30

Este es un método para contrarrestar el hecho de que puede comenzar a rastrear, pausar y luego mover el dedo o el mouse muy rápidamente (suponga un movimiento repentino en una pantalla táctil).

var time = 200
var tracker = setInterval(function(){
    historicTouchX = touchX;
}, time);

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

He hecho esto solo con touchX en este ejemplo. La idea es tomar una instantánea de la posición x cada 200 milisegundos, y luego tomarla de la posición actual y luego dividirla por 200 (velocidad = distancia / tiempo). Esto mantendría una nueva actualización sobre la velocidad. El tiempo es milisegundos y la salida sería la cantidad de píxeles recorridos por 200 milisegundos.

2
wazzaday 19 mar. 2014 a las 16:29
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;
});
8
Niloy 7 nov. 2013 a las 09:53