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

我將return false添加到click函數中，但是它的行為仍然很奇怪。 為什么有些不觸發？ 我創建約18個div /播放器。 但是即使我只創建一個播放器，也會發生這種情況。

完成活動后，是否可能需要取消活動？ （就像返回false一樣；正在嘗試這樣做）有時但並非總是可行...

我的想法用光了，這里是腳本的鏈接。 也許我只是錯過了一些東西。 我對腳本進行了一些更改，因此只需按一下按鈕，然后單擊游戲字段的下端（yatzy，kåk等）即可。 單擊時應彈出警報。 有時他們工作有時不工作。

Answer 1

您的代碼看起來不錯，看起來CSS搞砸了。

問題在於'gameCellLarge'div與它們所包圍的'gameCellMedium'和'gameCellSmall'div異相。 這是因為它們具有“ position：relative;” 樣式屬性，使他們可以從應有的位置徘徊。 （通過使用大多數瀏覽器附帶的調試器，您可以直觀地看到正在發生的情況，例如Firefox的Firebug或Chrome的開發人員工具。）

只能單擊“ gameCellSmall”框與其封閉的“ gameCellLarge”框重疊的部分。 您會發現所有框都有一個可單擊的區域，但是當您到達表格底部時，該區域會縮小。 這是因為當您下桌時，大型單元格與小型單元格越來越異相。 但是，如果您單擊框頂部，它將起作用，盡管如果您沒有意識到這一點，則似乎響應是隨機的和零星的。

無論如何，您可以通過從.gameCellLarge樣式中刪除'position：relative'來解決此問題。 這似乎對布局沒有影響，所以應該可以做到這一點。 您還可以指定“ border：1px純黑色；” 在.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

這不是直接解決您的問題的方法，但是這種情況很適合進行事件委派。 只是谷歌它，你會發現很多資源。 這是一個很好的網站-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沒有任何作用，那么我不確定這就是您在說的。