Отслеживайте скорость мыши с помощью JS

Какой лучший способ отслеживать скорость мыши с помощью простого JS/JQuery? Я хотел бы отслеживать, как быстро пользователь перемещает мышь во всех направлениях (вверх/вниз/влево/вправо).

Ответы

Ответ 1

В Sparklines есть отличный пример отслеживания движения мыши и его графического отображения. Их код доступен в источнике своего сайта, начиная со строки 315.

Простой и эффективный.

Вот код:

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

Ответ 2

Точно так же вы получаете скорость для чего-либо еще:

speed = distance / time

acceleration = speed / time 

И используйте:

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

Получить координаты мыши всякий раз, когда мышь перемещается.

Ответ 3

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

Ответ 4

Это метод противодействия тому, что вы можете начать отслеживать, приостановить, а затем быстро переместить палец или мышь (предположим, внезапный щелчок на сенсорном экране).

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

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

Я сделал это с помощью только touchX в этом примере. Идея состоит в том, чтобы сделать снимок x-позиции каждые 200 миллисекунд, а затем взять это из текущей позиции, затем разделить на 200 (скорость = расстояние/время). Это позволит обновить скорость. Время составляет миллисекунды, а выход будет числом пикселей, пройденных за 200 миллисекунд.