マウス速度をJSで追跡する

Question

プレーンなJS/JQueryでマウスの速度を追跡する最適な方法は何ですか？私はどのくらい速くユーザーがすべての方向（上/下/左/右）でマウスを動かすかを追跡したいと思います。あなたが何かのために速度を得る

Answer 1

Sparklines has a nifty exampleマウスの動きを追跡し、グラフ化します。彼らのコードは、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

同じ方法：

speed = distance/time 

acceleration = speed/time 

と使用：

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

マウスは、マウスが移動するたびに座標取得します。

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

Answer 4

これは、あなたが、追跡を開始、一時停止して、非常に迅速に指やマウスを動かすことができ、実際に対抗する方法である（touch上で突然のフリックをするとします。ここでは

はコードがあります画面）。

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のみでこれを行っています。アイデアは、200ミリ秒ごとにx位置のスナップショットを撮り、それを現在の位置から取って200（速度=距離/時間）で割ることです。これにより、速度の最新情報が維持されます。時間はミリ秒で、出力は200ミリ秒あたりの移動ピクセル数になります。