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

我正在用JavaScript和PHP创建一个包含网格的构建游戏。网格中的每个方块都是一个div，具有自己的onmouseover和onmouseown函数：

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=0；x { 对于（y=0；y<高度；y++） { var div=document.createElement（“div”）； //... div.onmouseclick=function（）{blockClick（x，y）} div.onmouseover=function（）{blockMouseover（x，y）} 儿童游戏（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);
    }
}

（x=0；x { 对于（y=0；y<高度；y++） { var div=document.createElement（“div”）； var myX=x； var myY=y； div.onmouseclick=function（）{blockClick（myX，myY）} div.onmouseover=function（）{blockMouseover（myX，myY）} 儿童游戏（div）； } } 同样的结果

我使用的是

div.setAttribute（“onmouseover”，…）

，它在Firefox中工作，但在IE中不工作。

---

谢谢

这是因为由于周围的闭包，您实际上在每个处理程序中共享相同的变量。因此，您需要像这样创建本地闭包：

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

---

您需要创建一个闭包来保留

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

for（变量x=0；x

一种更简洁的方法是定义一个函数来创建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));
  }
}

var createDiv=函数（x，y）{
var div=document.createElement（“div”）；
div.onmouseclick=function（）{blockClick（x，y）}；
div.onmouseover=function（）{blockMouseover（x，y）}；
返回div；
}
对于（变量x=0；x