onmouseover funktioniert nicht, wenn Sie javascript verwenden, fügen Sie die img Tags in IE

Brauche ich einige javascript-code, der dynamisch fügt ein img-tag einen div-und img-tag muss onmouseover-und onmouseout-Handler.

Ich habe es funktioniert auf Firefox. Aber es funktioniert nicht ganz auf den IE. Auf IE, den img-tag Hinzugefügt wird, aber die onmouseover-und onmouseout-Handler sind nicht aktiv.

Hier der code:

<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>

InformationsquelleAutor Mike W | 2009-11-12

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

Blick in eine der vielen gängigen javascript-Bibliotheken (jquery, prototype, etc). Sie verbergen sich browser Inkonsistenzen, so dass Sie nicht brauchen, um über das schreiben von code wie oben.

InformationsquelleAutor Omer Bokhari

3
```
img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');
```
Nicht verwenden setAttribute auf ein HTMLElement. Gibt es Fehler im Internet Explorer und Sie nicht bekommen Sie nichts im Vergleich zu den mehr lesbar DOM Level 1 HTML-alternative:
```
img.src= 'http://sstatic.net/so/img/logo.png';
```
Das wesentliche problem mit setAttribute am IE ist, dass es funktioniert genauso wie das normale property-Zugriff, selbst wenn die Eigenschaft hat einen anderen Namen, oder geben Sie für das Attribut. Also diese:
```
img.setAttribute('onmouseover', "alert('mouseover')");
```
ist die gleiche wie zu sagen:
```
img.onmouseover= "alert('mouseover')";
```
was keinen Sinn macht: die onmouseover Eigenschaft ist wie bei allen event-Handlern, soll eine Funktion sein, kein string. Zuweisen einer Funktion statt:
```
img.onmouseover= function() {
    alert('mouseover');
};
```
und dann haben Sie auch losgeworden, die böse eval-Stil-Praxis-putting-code in einen string. Hurra!

Als für addEventListener Sie können es verwenden, wenn Sie hinzufügen, fallback attachEvent call for IE (die hat Ihre eigenen verrückten Ereignis-listener-system). Aber in den häufigen Fall, wo Sie immer nur einen Zuhörer für jedes element ist es viel einfacher zu halten mit den old-school-unterstützt-durch-jeden-browser onsomething-Zuweisung von event Handlern.

+1 für die Erklärung klar, warum setAttribute funktioniert nicht im IE

InformationsquelleAutor bobince
0

Herausstellt, also die nicht-Unterstützung der addEventListener-Methode. Sie können überprüfen, eine Problemumgehung hier.

Sowieso, warum kommst du nicht mit jQuery? Es ist fast überschreibt alle Kompatibilitätsprobleme, hat eine Handvoll extras und völlig Felsen.

Danke! Mit img.attachEvent funktioniert unter IE. Es gibt einen Grund, warum ich kann nicht mit jquery, aber mein Grund ist nicht anwendbar, um über 99,99% der Leute, die dies Lesen, also werde ich nicht darauf eingehen.

InformationsquelleAutor metrobalderas
0

Ob's Antwort zeigt die richtige Methode zum anbringen von Ereignis-Listenern ohne Verwendung einer JavaScript-Bibliothek (und der ersten), aber ich möchte Folgendes hinzufügen:

onmouseover/out, sollten niemals angebracht werden, die als Attribute. Im Grunde genommen, bist du Weg durch alle die Mühe, das nicht zu tun

nur um es in Ihrem JavaScript. Veranstaltung handlering callbacks sollte immer angebracht werden, als Ereignis-Listener über attachEvent für den IE, und addEventListener für so ziemlich alle anderen.

InformationsquelleAutor Justin Johnson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.