Question

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

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

这意味着需要计算translateX和translatY。但是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属性。

计算出jQuery中mousedown的距离

2 个答案: