Javascript 在画布中单击对象时出现奇怪的错误？

我的脚本中出现了一个奇怪的错误。我在画布上有3个球，我可以点击其中任何一个来选择

如果在选择一个球后单击另一个球，则会选择新球。每次选择一个新球时，所选球的数组都会重置。到目前为止还不错

我想做的是在单击画布内的空白区域时重置所选球的数组

但这只适用于其中一个球（底部的球，数组中的索引#2）。 但如果我打开alert查看点击了什么球，所有球都会记录点击。 由于弹出了警报窗口，脚本冻结，我可以看到其他球也被短暂选中

我已经为你做了一张照片。当您第一次加载fiddle并注释掉bug的代码时，请取消注释并查看它

要查找的代码是：

function selectBall(){
var mX = mouseX;
var mY = mouseY;
    for(i=0;i<balls.length;i++){
        if(balls[i].select(mX, mY)){
            ball.length = 0;
            ball.push(balls[i]);

            /* Uncomment this to see that click actually happens.
            alert('Ball ' + i + ' clicked');
            */

        }

        /* Uncomment this to get the bug.
        else {
            ball.length = 0;                    
        }
       */
    }
}

函数selectBall（）{
var mX=鼠标；
var-mY=mouseY；
对于（i=0；i您正在为每个未单击的球重置球列表。这是不正确的。您要做的只是在未单击球的情况下重置球列表。这可以通过以下方法解决

function selectBall(){
  var mX = mouseX;
  var mY = mouseY;
  var isClick = false;
  for(i=0;i<balls.length;i++){
    if(balls[i].select(mX, mY)){
        isClick = true;
        ball.length = 0;
        ball.push(balls[i]);
        break;
    }
  }
  if (!isClick)
  { 
    ball.length = 0;
  }
}

函数selectBall（）{
var mX=鼠标；
var-mY=mouseY；
var isClick=false；
对于（i=0；i