Question

根据下面的jQuery文档，代码可用于捕获mouseup和mouse down事件。但我的要求有点不同

$("#dic").mouseup(function () {

}).mousedown(function () {

});

但是如何计算mousedown位置与mouseup位置之间的鼠标移动坐标。请帮帮我。如何在mousedown和mouseup之间应用mousemove事件

Answer 1

如果您需要捕获鼠标在拖动过程中移动的所有点，请绑定/取消绑定新的mousemove处理程序：

var allPoints = [];
$("#dic").mouseup(function (e) {
    $(this).unbind("mousemove", trackPoints);
}).mousedown(function (e) {
    $(this).bind("mousemove", trackPoints); 
});

function trackPoints(e) {
    allPoints.push({ x: e.pageX, y: e.pageY });
}

这样，trackPoints将在鼠标停止时开始触发，在重新启动时停止。

您可能还想在if(e.which == 1)和mouseup处理程序的顶部添加mousedown，以便他们只为鼠标左键执行bind，而不是中间或右侧按钮。

Answer 2

var X = [],
    Y = [],
    i = -1;
$("#dic").mouseup(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    // reset everything on mouseup
    X = [];
    Y = [];
    i = -1;
}).mousedown(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    console.log(X);
}).mousemove(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
});

<强> DEMO

Answer 3

var x = [], y = [], i = 0;

$("#dic").mouseup(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' up');
    x[i] = e.pageX;
    y[i++] = e.pageY;

    console.log(x);
    console.log(y);
});

$("#dic").mousedown(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' down');
    i = 0;
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

$("#dic").mousemove(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' move');
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

这将开始在mousedown上记录鼠标位置，你可以在mouseup上看到控制台上的输出。然后你可以用数组的第一项和最后一项描述的codeparadox或开始和结束之间的任何其他点来计算距离。

Code on JSFiddle

如何检索mousedown到mouseup事件之间的所有鼠标坐标

3 个答案: