2

以下の jQuery ドキュメントに従って、マウスアップおよびマウスダウン イベントをキャプチャするためにコードを使用できます。しかし、私の要件は少し異なります

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

}).mousedown(function () {

});

しかし、マウスダウン位置からマウスアップ位置までのマウス移動座標を計算するにはどうすればよいですか。これについて私を助けてください。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 に答える