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

演示版