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

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 处理程序中，您设置一个 bool 值来指示您正在记录并保存鼠标的坐标，并将距离初始化为 0。在 mousemove 处理程序中，您计算​​当前鼠标坐标和保存的坐标之间的差异(添加它到距离)，然后用当前的鼠标坐标覆盖保存的坐标。在 mouseup 处理程序中，您输出距离并取消设置 bool 值。

您的代码似乎是针对第二种解决方案，但问题是针对第一种。