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，但它仍然表现得很奇怪。为什么有些人没有触发？我创造了大约18个div / player。但即使我只创建了一个播放器，也会发生这种情况。

我完成后可能需要取消活动吗？（就像返回假;正在尝试做）有时工作但不总是...

我已经没有想法，这里是脚本的链接。也许我错过了一些东西。 The script 我稍微改了一下，所以只需按下按钮，然后点击游戏区域的下端（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样式中。

希望这有帮助。

Answer 2

嗯，首先，我将假设那些不工作的不是使用fieldNumber为6,7或17创建的。

除此之外......如果问题恰好在于停止事件传播，您可以尝试以下内容：

newField.onclick = function(e) {
     if (!e) var e = window.event;
     instance.DivClick(fieldNumber);
     if (e.preventDefault) e.preventDefault();
     else e.returnValue=false;
     return false;
}

除此之外，我无法真正测试任何事情以找出问题。

Answer 3

这不是您问题的直接答案，但像这样的情况是事件委派的一个很好的候选人。只是google for it，你会发现很多来源。这是一个很好的 - http://www.sitepoint.com/blogs/2008/07/23/javascript-event-delegation-is-easier-than-you-think/

它的工作方式是将事件处理程序附加到父容器并捕获冒泡的事件。然后，您可以获取事件的来源（IE中的event.srcElement和Firefox中的event.target）并根据它进行操作。在您的情况下，如果您为每个可点击的div附加一个唯一的ID，您可以检查它并调用相应的事件处理程序。

这是一种更干净的做事方式，而不是附加许多事件处理程序。

[编辑] ：找到您的问题。基本上，您的gamecellLarge div没有高度，因为它们只包含浮动元素。您已尝试通过添加height: 30px来修复此问题，但这会导致div与下一组div重叠。如果您有Firebug，请突出显示元素并查看问题。如果单击框的顶部1/3，则单击始终有效。

将样式更改为类似的样子，它应该有效。

.gameCellLarge {
    clear: both;
    overflow: hidden;
    width: 200px;
    zoom: 1
}

Answer 4

至少有三个没有触发任何事件，因为它们没有onClick处理程序：

if (fieldNumber == 6 || fieldNumber == 7 || fieldNumber == 17) { }

我不确定那是你在说什么，但是，如果你说底部的4或5个div什么都不做。

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

4 个答案: