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

我在 click 函数中添加了 return false，但它的行为仍然很奇怪。为什么有些不触发？我创建了大约 18 个 div/播放器。但即使我只创建一个播放器也会发生这种情况。

完成后我是否可能需要取消活动？ （就像 return false; 正在尝试做的那样） 有时有效，但并非总是...

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

Answer 1

你的代码看起来不错，看起来 CSS 搞砸了。

问题在于“gameCellLarge”div 与它们所包含的“gameCellMedium”和“gameCellSmall”div 不同步。这是因为他们有一个'位置：相对;' style 属性允许他们从他们应该在的地方徘徊。 （您可以通过使用大多数浏览器附带的调试器直观地看到正在发生的事情，例如 Firefox 的 Firebug 或 Chrome 的开发者工具。）

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

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

希望这会有所帮助。

Answer 2

嗯，首先，我要假设那些不工作的不是用 6、7 或 17 的 fieldNumber 创建的。

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

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 一下，您就会发现很多资源。这是一个很好的 - 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 什么都不做，我不确定你在说什么。