如何从指定偏移量计算鼠标移动距离

Question

我有一些问题。我需要计算从mousedown 事件到mouseup 的一些鼠标移动像素。所以我有这个代码：

selectArea.on({
    mousedown : function(e) {
        select = true;
    },
    mousemove : function(e) {
        var x2, y2, offset = $(this).offset();
            x2 = e.pageX - offset.left,
            y2 = e.pageY - offset.top,
            width = ?,
            height = ?
        ...
    },
    mouseup : function() {
        select = false;
    }
});

现在我需要知道我将鼠标从 mousedown 偏移量移动到 mouseup 偏移量的像素数，有什么方法可以计算吗？非常感谢您的帮助。

Answer 1

有两种不同的解决方案，具体取决于您对“我移动了多少像素”的定义

场景：鼠标向右移动 25px，向左移动 75px。

方案一：50px； （起点和终点的距离）

在 mousedown 处理程序中，您保存鼠标的坐标。在 mouseup 处理程序中，您计算​​当前鼠标坐标与保存的坐标之间的差异。

方案二：100px； （行驶距离）

在 mousedown 处理程序中，您设置一个布尔值以指示您正在记录并保存鼠标的坐标，并将距离初始化为 0。在 mousemove 处理程序中，您计算​​当前鼠标坐标和保存的坐标之间的差异（添加它到距离），然后用当前鼠标坐标覆盖保存的坐标。在 mouseup 处理程序中，您输出距离并取消设置布尔值。

您的代码似乎适用于第二种解决方案，但问题要求第一种。