Javascript “如何写作”；拖拽；画布上对象的事件？

（我纠正了mousedown的问题……）

我想实现的是在画布上拖动一个球，然后球将跟随鼠标并更改其颜色

一旦鼠标将其释放，其颜色将恢复为原始颜色

我使用“break”是因为一次只能拖动一个球

现在问题是,

“拖动”看起来很奇怪，似乎是“拖动”第一个球，但在第一个球之后只有mousemove（无需按下鼠标）可以

颜色不变

以下主要功能（在此处完成代码）：

var mousePress=false；
var mouseEvent=函数（）{
$（画布）.mousedown（函数（e）{
mousePress=true；
$（画布）.mousemove（函数（e）{
对于（var i=0；i您有两个mouseDown事件……也许第二个应该是mouseUp

我仍然对您想要的功能有点困惑。您是希望仅当mouseDown=true时球才会移动，还是单击一次球就会移动？因为在第二种情况下，您应该使用click（）处理程序

你的鼠标移动看起来也很奇怪……你是否试图让某个距离D内的任何球绑定到鼠标坐标？这会产生一些奇怪的行为

最好的方法是：

1） 在鼠标向下移动时，检测是否已选择球并保存该ID。（设置mousePressed=true）

2） 在mouseMove上，如果选择了mousePressed=true&&ball，则将该球绑定到鼠标坐标。不要以任何速度更新（）该球

3） 在mouseUp上，设置mousePressed=false并清除所有选中的球
非常感谢，这非常有帮助。结果很好：除了三次或四次拖动中的一次外，会出现一个禁止标志，并阻止用户在画布中拖动对象。这是唯一奇怪的事情。可以尝试添加
$（画布）。拖动（函数（）{return false；}）；
以抑制“禁止标志”。同时查看
.dragstart
、
.dragend
和
.dblclick
事件（有关所有DOM事件的列表，请参阅）
var mousePress = false;
var mouseEvent = function(){

$(canvas).mousedown(function(e){

    mousePress = true;

    $(canvas).mousemove(function(e){

            for(var i=0;i<figureNum;i++){

                var distX=e.pageX-balls[i].x;
                var distY=e.pageY-balls[i].y;
                var distance = Math.sqrt((distX*distX)+(distY*distY));

                if(distance<=20){
                    balls[i].x=e.pageX;
                    balls[i].y=e.pageY;
                    if(mousePress){
                       balls[i].c="#F05133";
                    }


                    break;
                }

                //else{balls[i].c="#FFED79";}

        }
    });
});


$(canvas).mouseup(function(e){

    mousePress=false;

    //for(var i=0;i<figureNum;i++){

    //  balls[i].c="#FFED79";

    //}
})

setTimeout(animate,speedMouse);
   }