Question

我有一个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);');
}

使用以下代码生成多个div：

addTool("1p", "Bar", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');
addTool("2p", "Tube", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');
addTool("3p", "Rotating", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');

鼠标事件在IE以外的所有主流浏览器中都能正常工作。似乎除了最后一个之外的所有div都将使用小写的鼠标事件，其鼠标事件与写入的一样，大写字母。
除了上一个div之外，所有鼠标事件都会触发，即使我写onmouseover而不是说ONmouseOVER，除了最后一个之外，所有事件都可以正常工作。

Answer 1

不要使用setAttribute添加事件。使用attachEventListener/addEvent

您遇到的问题是将元素添加到div中。每次添加新元素时，基本上都要擦掉它。那很不好。您应该使用appendChild向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");

running example

Answer 2

就像@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>";
}

在所有浏览器中都运行良好，包括IE。

Answer 3

你可以用JQuery做这个部分：

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

你甚至可以更进一步：

https://stackoverflow.com/a/4158203/190596

onmouseover为几个生成的div中的最后一个将无法在IE中工作

3 个答案: