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

【问题标题】：How can I retrieve all mouse coordinates between mousedown to mouseup event如何检索 mousedown 到 mouseup 事件之间的所有鼠标坐标
【发布时间】：2012-06-05 21:12:32
【问题描述】：

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

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

}).mousedown(function () {

});

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

【问题讨论】：

您需要这些事件之间的所有坐标还是只需要这两个坐标？
那是什么？只是两个，还是全部？
@apsillers 我想检索从 mousedown 到 mouseup 事件的所有鼠标移动坐标...

标签： javascript jquery

【解决方案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 将在鼠标向下时开始触发，并在鼠标重新向上时停止。

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

【讨论】：

【解决方案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

【讨论】：

它只会给我 mouseup 和 mousedown 坐标.. 但我需要所有坐标...
@SoI 检查演示和控制台

【解决方案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 时在控制台上看到输出。然后，您可以根据数组的第一项和最后一项或起点和终点之间的任何其他点描述的代码悖论计算距离。

Code on JSFiddle

【讨论】：

它给了我所有鼠标移动的坐标。但我只需要鼠标向下到向上事件之间......
是的，mousemove 会继续添加到数组中。如果您不希望它这样做，您可以在 mouseup 代码中取消绑定 mousemove 事件并在 mousedown 时再次绑定它。虽然，按照我介绍的方式，当它将数组记录到控制台时，您在数组中拥有第一个坐标 (mousedown)、所有 mousemove 坐标和最终坐标 (mouseup)。如果您不想要第一个和最后一个，请取出 mouseup 和 mousedown 中的 x[i] 和 y[i++] 行，仅获取中间移动。编辑：刚刚意识到 apsillers 的回答正是这样做的。