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

Question

我遇到了一个奇怪的问题,我正在创建很多动态div.我最近发现我的一些div不会触发onclick事件？所有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;
}

我将返回false添加到click函数,但它仍然表现得很奇怪.为什么有些人没有触发？我创造了大约18个div/player.但即使我只是创造了一个玩家,它也会发生.

一旦完成,我可能需要取消活动吗？(就像返回虚假;正在尝试做)有时工作但不总是......

我已经没有想法,这里是脚本的链接.也许我错过了一些东西. 脚本 我稍微改了一下,所以只需按下按钮,然后点击游戏区域的下端(yatzy,kåk等).它应该在单击时弹出警报.有时他们工作有时他们没有.

Answer 1

你的代码看起来很好,看起来CSS搞砸了.

问题是'gameCellLarge'div与他们附带的'gameCellMedium'和'gameCellSmall'div不同步.这是因为他们有'位置:亲戚;' style属性允许它们从应该的位置移动.(您可以通过使用大多数浏览器附带的调试器直观地看到发生的情况,例如Firebug with Firefox或Developer Tools with Chrome.)

只有"gameCellSmall"框中与其封闭的"gameCellLarge"框重叠的部分才是可点击的.你会发现所有的盒子都有一个可点击的区域,但当你到达桌子的底部时,区域会缩小.那是因为当你走下桌子时,大细胞与小细胞的相位越来越不同.但是如果你点击一个方框的顶部它会起作用,但如果你没有意识到这一点,那么响应似乎是随机的,零星的.

无论如何,你可以通过从.gameCellLarge样式中删除'position:relative'来解决这个问题.这似乎没有对布局产生影响,所以应该可以这样做.你也可以指定'border:1px solid black;' 在.gameCellLarge样式中.

希望这可以帮助.