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

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

17 голосов
/ 21 июня 2011

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

Ответы [ 4 ]

14 голосов
/ 21 июня 2011

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;
 });
7 голосов
/ 21 июня 2011

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

speed = distance / time

acceleration = speed / time

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

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

Чтобы получить координаты мыши, когда мышь движется.

6 голосов
/ 07 ноября 2013 
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;
});
2 голосов
/ 19 марта 2014

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

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 миллисекунд.

...