web-dev-qa-db-ja.com

純粋なJavaScriptを使用してmousedownでのみmousemoveを実行する最良の方法は？

mousemoveイベントで不要なループが発生することは望ましくありません。だから私は、パフォーマンス/ベストプラクティスの観点から、_mousedown == true_の間にのみmousemoveを実行するための最良の方法は何でしょうか？現在使用しているもの：

_var pressedMouse = false;

myObject.addEventListener("mousedown", function(e){

    mouseDownFunction(e); 
    pressedMouse = true;

    myObject.onmousemove = function(e) {
        if(pressedMouse == true){
            mouseMoveFunction(e);
        }
     }
});

myObject.addEventListener("mouseup", function(e){
    pressedMouse = false;
});
_

pressedMouse変数が原因で、mouseMoveFunction()が呼び出されていません。 onmousemoveが使用されていない場合、mousedownイベントの発生を防ぐことはできますか？

javascripteventsmousemovemousedown
7
Alyona

OnMouseMove-Functionをリスナーから削除することで、呼び出されないようにすることができます。

myObject.addEventListener("mousedown", function(e){
    mouseDownFunction(e); 

    myObject.onmousemove = function(e) {
        mouseMoveFunction(e);
     }
});

myObject.addEventListener("mouseup", function(e){
    myObject.onmousemove = null
});
12
CoderPi

イベントハンドラーを追加してから削除するので、場合によっては何度も何度も削除するので、最初にイベントオブジェクトを受け入れる準備ができているmouseMove関数を定義します。

function mouseMoveFunction(e) {
//stuff
}

これで、mousedownがアクティブになるたびに呼び出す新しい匿名関数を作成するのではなく、その関数への参照を追加するだけで済みます。さらに、その参照があるので、標準のadd/remove-EventListenerメソッドを使用することもできます。

myObject.addEventListener("mousedown", function(e){
    mouseDownFunction(e); 
    this.addEventListener("mousemove", mouseMoveFunction);
});

myObject.addEventListener("mouseup", function(e){
    this.removeEventListener("mousemove", mouseMoveFunction);
});
1
James

イベントオブジェクトには、マウスの移動中にどのボタンが押されたかを示す「which」というプロパティがあります。これを使用して、mousemove中に何らかの操作を行うかどうかを判別します。

0
thadam
myObject.addEventListener("mousedown", function(e){


    myObject.onmousemove = function(e) {
        if(pressedMouse == true){
            mouseMoveFunction(e);
        }
     }
});

上記で行っていることは、ブラウザがマウスダウンイベントを検出するたびに、マウス移動用のイベントリスナーを追加することです。

これにより、パフォーマンスが低下する可能性があります。たとえば、マウスを1000回押した後、ブラウザがmousemoveイベントを1,000回追加するとします。

Mousemove用に別のイベントリスナーを作成します（1回）

0
repzero