对多个对象使用相同的onmouseover函数

Question

我在JavaScript和PHP中创建了一个涉及网格的构建游戏。网格中的每一方是一个div，有自己的onmouseover和onmousedown事件功能：

for(x=0; x < width; x++) 
{ 
    for(y=0; y < height; y++) 
    { 
     var div = document.createElement("div"); 
     //... 
     div.onmouseclick = function() {blockClick(x, y)} 
     div.onmouseover = function() {blockMouseover(x, y)} 
     game.appendChild(div); 
    } 
} 

但是，所有的广场似乎有被添加的最后方的x和y。我可以理解为什么会发生这种情况 - 它将指针指向x和y，而不是克隆变量 - 但我该如何修复它？我甚至试过

for(x=0; x < width; x++) 
{ 
    for(y=0; y < height; y++) 
    { 
     var div = document.createElement("div"); 
     var myX = x; 
     var myY = y; 
     div.onmouseclick = function() {blockClick(myX, myY)} 
     div.onmouseover = function() {blockMouseover(myX, myY)} 
     game.appendChild(div); 
    } 
} 

具有相同的结果。

我使用div.setAttribute("onmouseover", ...)在Firefox中工作，但不是IE。 谢谢！

Answer 1

你需要创建一个封闭保留的x和y值。这应该做的伎俩：

for(var x=0; x < width; x++) { 
    for(var y=0; y < height; y++) { 
    var div = document.createElement("div"); 
    (function(x,y){ 
     div.onmouseclick = function() {blockClick(x, y)} 
     div.onmouseover = function() {blockMouseover(x, y)} 
    })(x,y); 
    game.appendChild(div); 
    } 
} 

这样做的一个简洁的方法是定义一个函数创建的div，然后在每次迭代中调用它：

var createDiv = function(x,y){ 
    var div = document.createElement("div"); 
    div.onmouseclick = function() {blockClick(x, y)}; 
    div.onmouseover = function() {blockMouseover(x, y)}; 
    return div; 
} 

for(var x=0; x < width; x++) { 
    for(var y=0; y < height; y++) { 
    game.appendChild(createDiv(x,y)); 
    } 
} 

Answer 2

这是因为您实际上由于周围的关闭而在每个处理程序之间共享相同的变量。所以，你需要创建本地倒闭这样的：

(function(x,y){ 
    div.onmouseclick = function() {blockClick(x, y)}; 
    div.onmouseover = function() {blockMouseover(x, y)}; 
})(x, y);