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

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のsには、小文字のマウスイベントがあり、大文字で書かれたとおりにマウスイベントがあります。と言う代わりに書いたとしても
、最後を除いてすべてのマウスイベントが発生します。これは最後を除いてすべて正常に機能します。divonmouseoverONmouseOVER

4

3 に答える 3

1

setAttributeを使用してイベントを追加しないでください。attachEventListener/addEventを使用します

あなたが持っている問題は、divに要素を追加することです。基本的に、新しい要素を追加するたびにそれを一掃します。それは悪いことです。divに新しいコンテンツを追加するには、appendChildを使用する必要があります。

基本的な考え方：

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

@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

この部分はJQueryで実行できます。

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

これをさらに進めることもできます。

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

于 2012-10-17T15:00:01.170 に答える