0

我正在用 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。谢谢!

4

2 回答 2

1

您需要创建一个闭包来保留xand的值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));
  }
}
于 2010-05-15T16:03:37.057 回答
0

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

(function(x,y){
    div.onmouseclick = function() {blockClick(x, y)};
    div.onmouseover = function() {blockMouseover(x, y)};
})(x, y);
于 2010-05-15T15:57:41.197 回答