これらのイベントをどのように処理すればよいのですか？コードが機能しないのはなぜですか？

Question

私は以下を行う必要があります。ユーザーがdivをクリックするとすぐに、ユーザーがdiv上にカーソルを移動してマウスの左ボタンを押しながらマウス座標を保存します。ユーザーがdivを離れるか、左ボタンを放すと、私は座標の記録を停止したい。私は、次のコードを持っている：

$(document).ready(function() { 
      var coordhdl = new coordinateHandler(); 
      $("#test").mousedown(function(e) { 

       $("#test").mousemove(function(ee) { 

        $("#test").mouseup(function(e) { 
         stopIt = true; 
        }); 
        if(stopIt == false) 
        { 
         coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop); 
        } 


       }); 

      }); 


     }); 

このコードの問題点は次のとおりです。 それは、ユーザーが唯一の左ボタンを押さずにdiv要素をクリックした場合でも、座標を記録します。 クリックした座標の記録を停止しません。

私はjavascript/jqueryを初めて使用しているので、あまりよく分かりません。ご協力いただきありがとうございます。

Answer 1

このようなものは動作するはずです。マウスがそれぞれ押された/リリースされたときに、フラグをtrue/falseに設定します。マウスの移動は、フラグが設定されている場合場合は、座標が追加されます：

$(document).ready(function() { 
    var isDown = false, 
     coordhdl = new coordinateHandler(); 
    $("#test").mousedown(function() { 
     isDown = true; 
    }).mouseup(function() { 
     isDown = false; 
    }).mousemove(function(e) { 
     if(isDown) { 
      coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop); 
     } 
    }); 
}); 

はここでのアクションで似たようなのdemoだ（それは単にあなたのcoordinateHandlerオブジェクトを使用するのではなく、p要素に座標を書き込みます）。

Answer 2

イベントハンドラをイベントハンドラ内には接続しないでください。マウスを動かすたびに、新しいmouseupイベントハンドラを添付します。彼らは上書きされず、追加されます。

$(document).ready(function() { 
    var coordhdl = new coordinateHandler(), 
     recording = false; 

    $("#test").mousedown(function(e) { 
     recording = true; 
    }).mousemove(function(e) { 
     if(recording) { 
      coordhdl.addCords(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); 
     } 
    }).mouseup(function(e) { 
     recording = false; 
    }); 
}); 

Answer 3

mousedownイベントがあるたびに、あなたはmousemoveハンドラを追加し、毎回、マウスの移動は、あなたが別のmouseupハンドラを追加します。

は、代わりに「グローバル」フラグを使用します。変数stopItがどこに宣言されているかわからないので、この変数のスコープも問題になる可能性があります。ハンドラをネストする必要はありませんので、この方法で試してください。

$(document).ready(function() { 
     var coordhdl = new coordinateHandler(); 
     var isRecording = false; 
     $("#test").mousedown(function(e) { isRecording = true }) 
        .mouseup(function(e) { isRecording = false }) 
        .mousemove(function(ee) { 
        if(isRecording) 
        { 
         coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop); 
        } 
        }); 
    });