Отслеживайте скорость мыши с помощью 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 миллисекунд.