使用JS跟踪鼠标速度

Question

使用普通的JS/JQuery跟踪鼠标速度的最佳方法是什么？我想跟踪用户在所有方向上移动鼠标的速度(上/下/左/右).

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

Answer 2

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

Answer 3

同样的方式你获得其他任何东西的速度:

speed = distance / time

acceleration = speed / time 

并使用:

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

鼠标移动时获取鼠标坐标.

Answer 4

使用当前的现代浏览器，我们现在可以使用moveX或moveY来检测鼠标的移动速度。在您想使用它之前，您应该查看兼容性表，因为较旧的浏览器将具有类似webkitMovementX.

document.addEventListener("mousemove", function(ev){
    console.log(`Movement X: ${ev.movementX}, Y: ${ev.movementY}`);
}, false);

上面的结果不是像像素/秒这样的平均速度，而是触发mousemove事件之间的总移动。如果你需要，px/s那么你可以像下面这样做：

var totalX = 0;
var totalY = 0;
var moveX = 0;
var moveY = 0;

document.addEventListener("mousemove", function(ev){
    totalX += Math.abs(ev.movementX);
    totalY += Math.abs(ev.movementY);
    moveX += ev.movementX;
    moveY += ev.movementY;
}, false);

setInterval(function(){
    console.log(`Speed X: ${totalX}px/s, Y: ${totalY}px/s`);
    console.log(`Movement X: ${moveX}px/s, Y: ${moveY}px/s`);
    moveX = moveY = totalX = totalY = 0;
}, 1000);

负数表示向左或顶部移动，而正数表示向底部或向右移动。