5

img タグを div に動的に追加する JavaScript コードが必要で、img タグには onmouseover および onmouseout ハンドラが必要です。

Firefoxで動作しています。しかし、IEではうまくいきません。IE では、img タグが追加されますが、onmouseover および onmouseout ハンドラーはアクティブではありません。

コードは次のとおりです。

<body>  
    <div id='putImageHere' />  

    <script type='text/javascript'>
        var node = document.getElementById('putImageHere');
        var img = document.createElement('img');
        img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');
        node.appendChild(img);

        // first attempt, which works on Firefox but not IE
        img.setAttribute('onmouseover', "alert('mouseover')");
        img.setAttribute('onmouseout', "alert('mouseout')");

        // second attempt, which I thought would work on IE but doesn't
        img.addEventListener('mouseover', function() { alert('mouseover') }, false);
        img.addEventListener('mouseout', function() { alert('mouseout') }, false);
    </script>  
</body>
4

4 に答える 4

8 
if (img.addEventListener) {
    img.addEventListener('mouseover', function() {}, false);
    img.addEventListener('mouseout', function() {}, false);
} else { // IE
    img.attachEvent('onmouseover', function() {});
    img.attachEvent('onmouseout', function() {});
}

多くの一般的な JavaScript ライブラリ (jquery、prototype など) の 1 つを使用することを検討してください。ブラウザの不一致を隠すので、上記のようなコードを書くことを心配する必要はありません。

于 2009-11-12T18:42:22.987 に答える
3 
img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');

setAttributeHTMLElement では使用しないでください。Internet Explorer にはバグがあり、より読みやすい DOM Level 1 HTML 代替と比較して何も得られません。

img.src= 'http://sstatic.net/so/img/logo.png';

IE での本質的な問題setAttributeは、プロパティの名前や型が属性と異なる場合でも、通常のプロパティ アクセスと同じように機能することです。したがって、この：

img.setAttribute('onmouseover', "alert('mouseover')");

は次のように言っているのと同じです:

img.onmouseover= "alert('mouseover')";

これは意味がありません:onmouseoverプロパティは、すべてのイベント ハンドラーと同様に、文字列ではなく関数である必要があります。代わりに関数を割り当てます。

img.onmouseover= function() {
    alert('mouseover');
};

そして、コードを文字列の中に入れるという厄介な eval スタイルの慣行も取り除きました。万歳！

については、 IE (独自のクレイジーなイベント リスナー システムを備えている)addEventListenerのフォールバック コールを追加すると、それを使用できます。attachEventしかし、要素ごとに 1 つのリスナーしか持たない一般的なケースでは、すべてのブラウザーでサポートされている古い学校のonsomething割り当てイベント ハンドラーを使用する方がはるかに簡単です。

于 2009-11-12T19:04:07.937 に答える
0

Obの答えは、JavaScript ライブラリを使用せずにイベント リスナーをアタッチするための正しい方法を示しています (そして最初でした) が、次を追加したいと思います。

onmouseover/out を属性としてアタッチしないでください。基本的に、あなたは何もしないというすべてのトラブルを経験しています

JavaScriptでそれを行うだけです。イベント ハンドラのコールバックは常に、IE の attachEventを介してイベント リスナとしてアタッチする必要があります。

于 2009-11-12T20:47:36.187 に答える
0

IE は addEventListener メソッドをサポートしていないことがわかりました。ここで回避策を確認できます。

とにかく、jQuery を使用しないのはなぜですか。それはほとんどすべての互換性の問題を上書きし、いくつかの追加機能を備えており、完全にロックされています.

于 2009-11-12T18:36:10.270 に答える