Javascript 最后生成的几个div的onmouseover在IE中不起作用

我有一个JavaScript函数：

function addTool(id, text, tool, pic) {
   var container = getById('infobox');
   var origimg = getById('tempimg').src;
   container.innerHTML += "<div id='" + id + "' class='toolText'>" + text + "<br><img      class='toolImg' src='img/tools/" + tool + "'></div>";
   getById(id).setAttribute('onMouseOver', "mOver('"+ id +"', '" + pic + "');");
   getById(id).setAttribute('onMouseOut', "mOut('"+ id +"', '" + origimg + "');");
   getById(id).setAttribute('href', 'javascript:mClick(id);');
}

鼠标事件在除IE之外的所有主要浏览器中都能正常工作。似乎除最后一个浏览器外，所有的

div

s都会有小写的鼠标事件，其鼠标事件的书写方式与大写字母完全相同。

---

除了最后一个

div

，所有鼠标事件都将触发，即使我在mouseover上写

onmouseover

，而不是说

onmouseover

，这在除最后一个之外的所有鼠标事件上都可以正常工作。

不要使用setAttribute添加事件。使用

您遇到的问题是将元素添加到div中。每次添加新元素时，基本上都会将其擦除。这很糟糕。您应该使用向div添加新内容

基本理念：

function attachEvent(elem, eventName, fn) {
    if ( elem.attachEvent ) {
        elem.attachEvent( 'on' + eventName, fn);
    } else {
        elem.addEventListener( eventName, fn, false );
    }
}


function addTool(text, message) {

   var container = document.getElementById('infobox');
   var newTool = document.createElement("a");
   newTool.innerHTML = text;
   newTool.href="#";
   var myClickFnc = function(e) {
       alert(message);
       return false;
   }
   attachEvent(newTool, "click", myClickFnc);
   container.appendChild(newTool);
}

addTool("cat","meow");
addTool("dog","bark");
addTool("pig","oink");

---

您可以使用JQuery完成这一部分：

$("#"+ id).mouseover(function() {
  mOver('"+ id +"', '" + pic + "');
});

你甚至可以更进一步：

---

正如@epascarello所指出的，似乎是

setAttribute

造成的，因此我通过将事件设置为内联来解决它，例如：

function addTool(id, text, tool, pic) {
    var container = getById('infobox');
    var origimg = getById('tempimg').src;
    container.innerHTML += "<div id='" + id + "' class='toolText'"  +
    "onmouseover=\"mOver('"+ id +"', '" + pic + "');\" "            +
    "onmouseout=\"mOut('"+ id +"', '" + origimg + "');\" "          +
    "onclick=\"mClick(id);\""                                       +
    ">" + text + "<br><img class='toolImg' src='img/tools/" + tool + "'></div>";
}

函数addTool（id、文本、工具、图片）{
var container=getById（'infobox'）；
var origimg=getById（'tempimg'）.src；
container.innerHTML+=“”+text+“
”；
}

---

这在所有浏览器中都能正常工作，包括IE。

不确定这个问题的答案，尽管我注意到您将DIV id设置为1p、2p、3p。ID应该以字母而不是数字开头。关于更多信息，您似乎是正确的，setAttribute是罪魁祸首。尽管我决定以内联方式声明鼠标事件，而不是使用您的解决方案。谢谢为什么要内联声明它们？这是一个糟糕的选择，因为这是一个糟糕的做法。你也可以这样做，这在所有浏览器中都适用

newTool.onclick=function（）{alert（“a”）；}
function addTool(id, text, tool, pic) {
    var container = getById('infobox');
    var origimg = getById('tempimg').src;
    container.innerHTML += "<div id='" + id + "' class='toolText'"  +
    "onmouseover=\"mOver('"+ id +"', '" + pic + "');\" "            +
    "onmouseout=\"mOut('"+ id +"', '" + origimg + "');\" "          +
    "onclick=\"mClick(id);\""                                       +
    ">" + text + "<br><img class='toolImg' src='img/tools/" + tool + "'></div>";
}