2

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

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

}).mousedown(function () {

});

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

4

3 回答 3

7

如果您需要在拖动过程中捕获鼠标经过的所有点，请绑定/取消绑定新的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)的顶部添加一个，以便它们只执行鼠标左键，而不是中键或右键。mouseupmousedownbind

于 2012-05-31T15:42:53.633 回答
4 
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;
});

演示

于 2012-05-31T15:27:24.180 回答
1 
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 时在控制台上看到输出。然后，您可以按照使用数组的第一项和最后一项或开始和结束之间的任何其他点描述的代码悖论来计算距离。

JSFiddle 上的代码

于 2012-05-31T15:47:51.513 回答