javascript - 如何检测用户鼠标移动的距离？

Question

我正在尝试检测鼠标移动的距离(以像素为单位)。我目前正在使用:

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.abs(((startingTop - event.clientY) + (startingLeft - event.clientX)) + 14) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
});

但是，我觉得这不是正确的方法，是吗？这对我来说并不一致。

这是它现在如何工作的演示:http://jsfiddle.net/Em4Xu/1/

额外的细节:

我实际上正在开发一个拖放插件，我想创建一个名为 distance 的功能，就像 draggable 一样，你必须在拖动鼠标之前将其拉动一定数量的像素.我不是 100% 确定如何执行此操作，因此首先我需要获取鼠标从 startingTop 和 startingLeft 位置移动的像素。

有人有什么建议吗？

Answer 1

这是一个测量鼠标移动距离的版本:

var totalDistance = 0;
var lastSeenAt = {x: null, y: null};

$(document).mousemove(function(event) {
    if(lastSeenAt.x) {
        totalDistance += Math.sqrt(Math.pow(lastSeenAt.y - event.clientY, 2) + Math.pow(lastSeenAt.x - event.clientX, 2));
        
    $('span').text('So far your mouse ran this many pixels:   ' + Math.round(totalDistance));
    
    }
    lastSeenAt.x = event.clientX;
    lastSeenAt.y = event.clientY;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>