事件監聽器不在循環中工作

我遇到addEventListener()函數的問題。我試圖建立一個基於數組的變量的菜單（我不會解釋爲什麼這樣設置）。事件監聽器不在循環中工作

下面是代碼：

var _Dirt = document.getElementById("dirt"); 

_Dirt.addEventListener('mouseover', function() { menuOver(true, this, _dirtY); }, false); 
_Dirt.addEventListener('mouseout', function() { menuOver(false, this, _dirtY); }, true); 

var _DirtDiv = _Dirt.getElementsByTagName('div')[0]; 

for (nLink in Men["dirt"]) { 

    var _lnk = document.createElement('p'); 
    _lnk.className = 'menu'; 
    _lnk.innerHTML = Men["dirt"][nLink][0]; 
    _lnk.addEventListener('click', menuLoop(Men["dirt"][nLink][1]), false); 

    _DirtDiv.appendChild(_lnk); 
    _DirtDiv.innerHTML+= '<br />'; 

}

這裏是menuLoop功能（如果你擔心，我沒有正確綁定變量權：

function menuLoop (n) { 

    return function() { 

     menuLink (n); 

    } 

}

現在，惱人的部分是事件監聽器在_Dirt元素上工作正常，但是根本沒有在_lnk元素上，即使當我將其更改爲_lnk.onclick = function() { //something }時，它也不起作用（事實上，onclick屬性不會起作用小號如何在DOM中）。

我有另外一個循環函數，它也將一個事件監聽器附加到一個元素上，並且這個函數完全正常......而且代碼非常相似。令人沮喪的是，這段代碼完美無缺地工作。我甚至不記得對這段代碼做任何修改。我試圖在代碼中隔離這個函數，看看腳本中是否有斷點，但問題仍然存在。

如果您需要我的代碼的任何其他部分，請讓我知道。

來源

2012-03-13 Battle_707

有你嘗試只是傳遞一個硬編碼的'function（）{alert（'boom！'）;}'而不是'menuLoop（Men [「dirt」] [nLink] [1]）'火災？ – Yaniro 2012-03-13 18:19:39

*「onclick'屬性甚至不會顯示」*這是因爲您沒有添加屬性。您正在直接使用DOM及其事件系統。 – 2012-03-13 18:29:54

@Yaniro：是的，我已經嘗試過。徒勞無功。我不是：我指的是當我添加一個onclick事件。我知道在添加事件偵聽器時，它不會顯示在DOM中。 – 2012-03-13 18:33:08

（這是假設你的數據結構是正確的下）

你的問題是

_DirtDiv.innerHTML += '<br />';

這基本上採用的_DirtDiv子節點，它們序列化爲一個字符串（HTML），連接'<br />'並將其分配回innerHTML。瀏覽器將解析字符串並創建相應的DOM節點。

您之前創建的DOM節點的標識已丟失，事件處理程序也是如此。此過程銷燬並創建了新的與您之前創建的節點不同的DOM節點。

如果你想添加一個br節點上，使用DOM操作，以及：

_DirtDiv.appendChild(document.createElement('br'));

來自實例這表明節點是不同的瀏覽器控制檯：

> var node = document.createElement('div'); 
    undefined 
> node.id = 'foo'; 
    "foo" 
> document.body.appendChild(node); 
    <div id="foo"></div> 
> node === document.getElementById('foo'); 
    true          // nodes are the same 
> document.body.innerHTML += '<br />'; 
    "... long HTML string ..." 
> node === document.getElementById('foo'); 
    false          // nodes are different

來源

2012-03-13 18:18:13

+1優秀的捕獲。如果需要換行符，應該通過DOM插入而不是innerHTML修改來添加。 – jfriend00 2012-03-13 18:21:47

這是一個代碼格式問題。問題中的'
'在SO頁面被解釋爲HTML。 – 2012-03-13 18:21:55

@amnotiam：謝謝，更新了答案。 – 2012-03-13 18:24:18

事件監聽器不在循環中工作

回答

相關問題