javascript - 間隔を置いてマウスを押したときにイベント引数を更新する方法は?

Question

onmousedownあなたが保持している場合のように機能しないのでonkeydown、私は妥協して独自のスタイルを作成する必要がありました.これまでのところ、私はこれを思いつきました:

can.onmousedown = function(e) { 
    map.moving = setInterval(function() {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX = e.pageX;
        map.posY = e.pageY;
    }, 70);
}

can.onmouseup = function(e) {
    clearInterval(map.moving);
}

私が今抱えている唯一の問題は、e引数が最初のクリック時にのみ設定されているため、マウスの座標が間隔全体で同じままであることです。これを修正する方法はありますか?

Answer 1

You need to invoke mousemove aswell.

can.onmousemove = function(e) {
    if( map.moving ) {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX = e.pageX;
        map.posY = e.pageY;
    }
};

can.onmousedown = function(e) {
    map.moving = true;
};

can.onmouseup = function(e) {
    map.moving = false;
};

Optionally, you probably want to decouple and slow down the execution of mousemove handlers, since that happens (like the scroll events, very fast). That could be done also invoking timeouts for instance.

Answer 2

Try this:

can.onmousedown = function(e) { 
    map.moving = setInterval(function() {
        e = e || window.event;
        console.log(e.pageX + ' ' + e.pageY);
        map.posX = e.pageX;
        map.posY = e.pageY;
    }, 70);
}

can.onmouseup = function(e) {
    clearInterval(map.moving);
}