Javascript onclick 停止工作，多个动态创建的 div

Question

我遇到了一个奇怪的问题，我正在创建很多动态 div。我最近发现我的一些 div 没有触发 onclick 事件？所有的 div 都是使用相同的模板创建的，那么为什么有些 div 不起作用？大多数时候，它是底部的 4-5。如果您单击其中一个然后重试，您可能会触发其中一个。但只是偶尔。

创建div的代码:

// Code to loop thru the number of players and create the divs accordingly
for (fieldNumber = 0; fieldNumber < 18; fieldNumber++) {
        var holderDiv = CreateDiv('gameCellLarge', '');
        holderDiv.style.width = 150 + extraCellWidth + 'px'; // Ändra storleken beroende på antalet spelare

        if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
            newField = CreateDiv('gameCellMedium borderFull gameText', gameText[fieldNumber]);
        else
            newField = CreateDiv('gameCellMedium borderWithoutTop gameText', gameText[fieldNumber]);
        holderDiv.appendChild(newField);

        for (playerNumber = 0; playerNumber < players.length; playerNumber++) {            
            holderDiv.appendChild(players[playerNumber].InitField(fieldNumber));
        }
        gameFieldDiv.appendChild(holderDiv);
    }




GameField.prototype.InitField = function(fieldNumber) {
var newField = document.createElement("div");
if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
    newField.className = 'gameCellSmall borderFull gameText gameTextAlign';
else
    newField.className = 'gameCellSmall borderWithoutTop gameText gameTextAlign';

var instance = this;
if (fieldNumber == 6 || fieldNumber == 7 || fieldNumber == 17) { }
else
    newField.onclick = function() { instance.DivClick(fieldNumber); return false; }

this.fields[fieldNumber] = newField;
this.score[fieldNumber] = 0;
return newField;
}

我在点击函数中添加了 return false，但它仍然表现得很奇怪。为什么有些不触发？我创建了大约 18 个 div/播放器。但即使我只创建一个播放器，它也会发生。

我是否需要在完成事件后取消事件？ (就像 return false; 正在尝试做的那样)有时但不总是有效...

我已经没有想法了，这里是脚本的链接。也许我只是错过了一些东西。 The script我对其进行了一些更改，因此只需按下按钮并单击游戏字段的下端(yatzy、kåk 等)。单击时应弹出警报。有时他们工作有时他们不。

Answer 1

你的代码看起来没问题，看起来 CSS 搞砸了。

问题是“gameCellLarge”div 与它们包含的“gameCellMedium”和“gameCellSmall”div 不同步。这是因为他们有一个'position:relative;' style 属性，允许他们从他们应该去的地方徘徊。 (您可以使用大多数浏览器附带的调试器直观地看到发生了什么，例如 Firefox 的 Firebug 或 Chrome 的开发者工具。)

只有与封闭的“gameCellLarge”框重叠的“gameCellSmall”框部分是可点击的。您会发现所有框都有一个可点击区域，但是当您到达表格底部时该区域会缩小。那是因为随着你沿着 table 往下走，大细胞越来越多地与小细胞不同步。但是，如果您点击框的顶部，它就会起作用，尽管如果您没有意识到这一点，它的响应似乎是随机和零星的。

无论如何，您可以通过从 .gameCellLarge 样式中删除“position:relative”来解决这个问题。这似乎对布局没有影响，所以这样做应该没问题。您还可以指定 'border:1px solid black;'采用 .gameCellLarge 风格。

希望这对您有所帮助。