jQuery MouseMove無限循環

Question

單擊鼠標按鈕時，我嘗試處理鼠標移動。 但是當釋放鼠標按鈕時，鼠標移動事件仍然有效。 問題出在哪里，如何解決？

例：

clicked=false;
var counter =0;
$(document).mousedown(function(){
  clicked=true;
  $(".clicked").text(clicked);
  if(clicked){
    $(document).mousemove(function(){
      $(".mm").append(++counter+" "+clicked+"<br>");
    });
  }
});
$(document).mouseup(function(){
  clicked=false;
  $(".clicked").text(clicked);
  $(".mm").html("mouseup, clicked: "+clicked+"<br>");
})

JSFidle： https ：//jsfiddle.net/r6hb3csp/1/

即使單擊為false，mousemove事件也有效。

Answer 1

您可以檢查單擊的BOOLEAN是否可以執行操作（如果不執行任何操作），或者可以在mouseup后取消綁定事件，例如：

clicked=false;
var counter =0;
$(document).mousedown(function(){
    clicked=true;
    $(".clicked").text(clicked);
    if(clicked){
        $(document).mousemove(function(){
            $(".mm").append(++counter+" "+clicked+"<br>");
        });
    }
});
$(document).mouseup(function(){

    clicked=false;
    $(".clicked").text(clicked);
    $(".mm").html("mouseup, clicked: "+clicked+"<br>");
    $(document).unbind("mousemove");
})

https://jsfiddle.net/r6hb3csp/7/

Answer 2

請嘗試以下方法：

clicked=false;
var counter =0;
$(document).mousedown(function(){
    clicked=true;
    $(".clicked").text(clicked);
    if(clicked){
            $(".mm").append(++counter+" "+clicked+"<br>"); 
    }
});
$(document).mouseup(function(){
    clicked=false;
    $(".clicked").text(clicked);
    $(".mm").html("mouseup, clicked: "+clicked+"<br>");
})

演示版