JS控制台错误 - 对象未定义

Question

我有以下JS函数，我正在使用它来检测HTML5画布上的“可拖动”图像是否被拖动到静态“描述框”图像的顶部，也显示在画布：

function isHit(mouseX, mouseY){ 
if(draggingImage == true){ 
    console.log("if dragging image == true statment is being called"); 
    if(mouseY > 420){ 
     if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 
      console.log("Correct"); 
     }else{ 
      console.log("Incorrect"); 
     } 
    } 
} 

}

的想法是，将有在画布上的一些静态图像（其将是该描述框），和可拖动的图像的更大数量。用户将被要求拖动每个可拖动的图像到相关的描述框。

此刻，我的if声明只是检查当前被拖动的图像是否属于四个描述框中的第一个。由于描述框全部显示在画布底部的一行中，所以我设置了函数来仅在mouseY变量（画布上光标的y位置）大于0时检查碰撞420-因为420是描述框图像的顶部'边界'。

然后，如果draggingImage变量为true，并且光标的mouseY值大于420，我想开始检查光标是否悬停在任何描述框上。第一个显示在X位置80和200之间，所以我检查mouseX是否大于80且小于200.

如果是，则函数应检查obj.shape.index的值是否大于或者等于0并且小于numImagesAssets的值。如果是，控制台应该记录“正确”，如果没有，它应该记录“不正确”。

变量obj.shape.index获取在我的图像数组中所点击图像的位置（此数组包含画布上显示的所有可拖动图像）。如果该值在一定范围内，那么我知道图像属于第一个描述框，如果它在另一个范围之间，则它属于下一个描述框等。

在此示例中，值可变numImagesAssets为10（如在我的代码显示在控制台由一个console.log线）

以我mousedown功能，我有行：

console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index); 

和当我点击我的画布的图像上，这个console.log行显示变量属性obj.shape.index的值，例如，我刚刚点击画布上拖动图像之一，该行打印以下输出到控制台：

value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8 

所以我知道我点击那个时候的形象在我的图像阵列在第8位（我已经多次手动检查过，每次都点击一张不同的图片，并且始终显示正确的位置）。

现在，我遇到的问题是，当我真的去拖动一个图像在其正确的描述框，我得到一个控制台错误，说“obj没有定义”，它是抱怨行：

if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 

但是，奇怪的是，如果我拖动图像的不属于描述框之一，在我if statment的else子句正确触发，并在“不正确的”被打印到控制台....

我想不通为什么它不工作时，我将图像拖到正确的说明框中，邻r为什么它说“obj”在这种情况下没有被定义，但是随后很高兴在if声明中使用“obj”作为“else”子句。

任何人有任何想法？

编辑19/03/2013 @ 12:00

好吧，我已经编辑我的isHit功能一点，添加另一console.log线，它会显示我的isHit函数内的obj.shape.index值。该函数现在看起来是这样的：

function isHit(mouseX, mouseY, obj){ 
if(draggingImage == true){ 
    console.log("if dragging image == true statment is being called"); 
    if(mouseY > 420){ 
     console.log("Value of obj.shape.index = " +obj.shape.index); 
     if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){ 
      console.log("Correct"); 
     }else{ 
      console.log("Incorrect"); 
     } 
    } 
} 
} 

我刚刚调用isHit之前以下控制台日志行：

console.log("obj.shape.index = " + obj.shape.index); 

此行显示的obj.shape.index值是0的时候我第一次点击图像（这是正确的 - 它是我的图像数组中的第一张图像），然而，随后我将图像拖到画布周围，obj.shape.index的值似乎随机增加......在某一时刻，控制台显示它是23，然后是25，然后当我最终将它拖到它的描述框时，控制台记录下这行：

if dragging image == true statment is being called 

显示该isHit函数被调用，并打印到控制台，接下来的事情是行：

Value of obj.shape.index = 34 

任何想法，为什么obj.shape.index价值不断增加？它实际上不是数组中元素的位置吗？我确定它是这样的，因为当我点击其他图像时，它会显示它们在数组中的位置值，所以我不明白为什么随着我在画布上移动图像，值不断增大。 ..它在阵列中的位置并不是在所有的改变......

Answer 1

如果obj.shape.index是进入前isHit有效（），你可能有一个范围的问题。

试试这个 - 供应OBJ到isHit：

// call isHit and also supply obj 
console.log("obj = "+obj);     // Test obj for validity just before calling isHit 
var isItHit = isHit(mouseX, mouseY, obj); // Then call isHit WITH obj 

// and modify isHit to accept the obj 
function isHit(mouseX,mouseY,obj) { ...