5

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

使用以下代码生成几个divs：

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除了最后一个之外的所有 s 都将具有小写的鼠标事件，这将具有与所写完全相同的鼠标事件，并带有大写字母。
除了最后一个，所有鼠标事件都将触发div，即使我写onmouseover而不是 say ONmouseOVER，这在除最后一个之外的所有事件上都可以正常工作。

4

3 回答 3

1

正如@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 在内的所有浏览器中都可以正常工作。

于 2012-10-18T06:53:41.183 回答
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");

运行示例

于 2012-10-17T14:58:20.777 回答
-1

你可以用 JQuery 做这部分：

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

你甚至可以更进一步：

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

于 2012-10-17T15:00:01.170 回答