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

这是一种方法来对抗你可以开始跟踪，暂停然后快速移动手指或鼠标的事实（假设在触摸屏上突然轻弹）。

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毫秒行进的像素数。

Answer 5

使用当前的现代浏览器，我们现在可以使用movementX或movementY来检测鼠标的移动速度。在使用它之前，您应该看到兼容性表，因为较旧的浏览器将带有诸如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);

负数表示向左或向右移动。

Answer 6

我还需要找到鼠标的加速度、速度和移动。下面是为 react 应用程序 实现的代码。通过这个我们能够找到鼠标的移动、速度、最大速度、加速度、最大加速度。

    let previousEvent, currentEvent;        
    let maxSpeed = 0, previousSpeed = 0, speed = 0, maxPositiveAcc = 0, maxNegativeAcc = 0;
    componentDidMount() {
              
                document.addEventListener('mousemove', (event) => {
                    currentEvent = event
                });
        
                setInterval(function () {
                    if (currentEvent && previousEvent) {
                        let movementX = Math.abs(currentEvent.pageX - previousEvent.pageX);
                        let movementY = Math.abs(currentEvent.pageY - previousEvent.pageY);
                        let movement = Math.sqrt(movementX * movementX + movementY * movementY);
         //Dividing by 100 since the setInterval function is called every 100ms
                        speed = 10 * movement; 
                        maxSpeed = Math.round(speed > maxSpeed ? (maxSpeed = speed) : maxSpeed);
        
                        let acceleration = 10 * (speed - previousSpeed);
        
                        if (acceleration > 0) {
                            maxPositiveAcceleration = Math.round(acceleration > maxPositiveAcc ? (maxPositiveAcc = acceleration) : maxPositiveAcc);
                        } else {
                            maxNegativeAcceleration = Math.round(acceleration < maxNegativeAcc ? (maxNegativeAcc = acceleration) : maxNegativeAcc);
                        }
                    }
                    previousEvent = currentEvent
                    previousSpeed = speed;
                }, 100);
            }

使用JS跟踪鼠标速度

6 个答案: