Jquery MouseMove infinity loop

Question

I try to handle mouse move when mouse button is clicked. But when mouse button is released, mouse move event still works. Where is the problem and how to solve the problem?

Example:

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/

Even if clicked is false, mousemove event works.

Answer 1

You can check on the BOOLEAN clicked if it ture do your action if not do nothing Or you can unbind your event after mouseup like that:-

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

Please try this:

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>");
})

Demo