javascript - 在jQuery中计算从mousedown移动的距离

Question

我想通过 jquery 中的鼠标移动事件获取翻译 x 和翻译 y 值。

当鼠标按下页面中的特定点并移动光标时，我需要找到翻译值它从旧点移动到新点的距离。再次移动意味着需要计算它从前一个旧点移动到新点的距离。

这意味着需要计算 translateX 和 translateY。但是 e 包含一些 pageX,clientX 之类的东西，jquery 中没有 translateX / translateY ？

谢谢，

湿婆

Answer 1

var bMouseDown = false;
var oPreviousCoords = {
    'x': 0,
    'y': 0
}

$(document).on('mousedown', function (oEvent) {
    bMouseDown = true;
    oPreviousCoords = {
        'x': oEvent.pageX,
        'y': oEvent.pageY
    }
});

$(document).on('mouseup', function (oEvent) {
    bMouseDown = false;
});

$(document).on('mousemove', function (oEvent) {
    var oDelta;

    if (!bMouseDown) {
        return;
    }

    oDelta = {
        'x': oPreviousCoords.x - oEvent.pageX,
        'y': oPreviousCoords.y - oEvent.pageY
    }

    oPreviousCoords = {
        'x': oEvent.pageX,
        'y': oEvent.pageY
    }
});

Answer 2

我认为您需要将当前值存储在几个变量中，然后在下次触发 mousemove 事件时进行比较，如下所示：

var transX = 0;
var transY = 0;
$(document).on('mousemove', function(e){
    if (e.pageX>transX)
    {
        transX = transX-e.pageX;
    }
    else 
    {
        transX = e.pageX-transX;
    }
    //and the same for transY
});

据我所知，javascript 中没有用于 mousemove 事件的 transY 或 transX 属性。