MSIE und addEventListener Problem in Javascript?

84 
document.getElementById('container').addEventListener('copy',beforecopy,false );

In Chrome / Safari wird oben die Funktion "Vor dem Kopieren" ausgeführt, wenn der Inhalt der Seite kopiert wird. MSIE soll diese Funktionalität ebenfalls unterstützen, aber aus irgendeinem Grund wird folgende Fehlermeldung angezeigt:

"Objekt unterstützt diese Eigenschaft oder Methode nicht"

Ich verstehe, dass Internet Explorer nicht mit dem Hauptknoten spielt, aber ich hätte gedacht, dass die Bereitstellung eines Knotens anhand der ID gut funktionieren würde. Hat jemand eine Idee, was ich falsch mache? Danke im Voraus.

** Bonuspunkte für alle, die mir sagen können, wofür der 3. Parameter "Falsch" gut ist.

javascript internet-explorer addeventlistener Matrym
quelle
Hier ist ein guter Artikel, der die Erfassungsphase useCapturesehr gut erklärt: coding.smashingmagazine.com/2013/11/12/…
feeela

Antworten:

185

Im IE müssen Sie attachEventeher als den Standard verwenden addEventListener.

Es ist üblich, zu überprüfen, ob die addEventListenerMethode verfügbar ist, und sie zu verwenden. Andernfalls verwenden Sie attachEvent:

if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

Sie können eine Funktion dafür erstellen:

function bindEvent(el, eventName, eventHandler) {
  if (el.addEventListener){
    el.addEventListener(eventName, eventHandler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+eventName, eventHandler);
  }
}
// ...
bindEvent(document.getElementById('myElement'), 'click', function () {
  alert('element clicked');
});

Sie können ein Beispiel für den obigen Code ausführen hier .

Das dritte Argument von addEventListenerist useCapture; Wenn true, wird angezeigt, dass der Benutzer die Ereigniserfassung initiieren möchte .

Christian C. Salvadó
quelle
1
Ich freue mich über Ihre Antwort. Ich habe gerade versucht, was Sie gepostet haben, und es hat funktioniert. Die Sache, die mich jetzt abschreckt, ist, dass das "Kopieren" -Ereignis nicht funktioniert, das "Onclick" -Ereignis jedoch. Insbesondere ist dies seltsam, da quirksmode angibt, dass es funktionieren soll: quirksmode.org/dom/events/cutcopypaste.html Irgendwelche Ideen?
Matrym
Kratz diesen Kommentar. Ich habe nur isoliert und versucht, was Sie gesendet haben, und das Ändern des Klicks zum Kopieren funktioniert. Danke noch einmal.
Matrym
1
Warum zeigt die Microsoft-eigene Dokumentation dann die Verwendung addEventListener? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
wmarbut
@wmarbut addEventListener wurde, glaube ich, in IE9 hinzugefügt. attachEvent wurde in IE 11 entfernt. Die ursprüngliche Frage stammt aus dem Jahr 2009. CMS hat die richtige, robuste Methode bereitgestellt, die auch mit IE 11 weiterhin funktioniert.
Colin Young
Das erklärt, warum es für mich im Internet funktioniert, aber nicht im Intranet, da ich meine Einstellungen für Intranetsites auf den Kompatibilitätsmodus eingestellt habe.
Roger Perkins
32

Wenn Sie JQuery 2.x verwenden, fügen Sie bitte Folgendes in das Feld ein

<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
   </head>
   <body>
    ...
   </body>
</html>

Das hat bei mir funktioniert.

Aarif
quelle
3
Für diejenigen, die IE-Versionen <= 8 ausführen, wird das Problem dadurch nicht behoben.
Ninjaneer
5

versuche es hinzuzufügen 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

direkt nach dem öffnenden Head Tag

130nk3r5
quelle
2
Für diejenigen, die IE-Versionen <= 8 ausführen, wird das Problem dadurch nicht behoben.
Ninjaneer
5

Internet Explorer (IE8 und niedriger) wird nicht unterstützt addEventListener(...). Es hat ein eigenes Ereignismodell mit der attachEventMethode. Sie könnten einen Code wie diesen verwenden:

var element = document.getElementById('container');
if (document.addEventListener){
    element .addEventListener('copy', beforeCopy, false); 
} else if (el.attachEvent){
    element .attachEvent('oncopy', beforeCopy);
}

Ich empfehle jedoch, das Schreiben eines eigenen Wrappers für die Ereignisbehandlung zu vermeiden und stattdessen ein JavaScript-Framework (wie jQuery , Dojo , MooTools , YUI , Prototype usw.) zu verwenden und das Update dafür nicht selbst erstellen zu müssen.

Das dritte Argument im W3C-Ereignismodell hat übrigens mit dem Unterschied zwischen Sprudeln und Erfassen von Ereignissen zu tun . In fast jeder Situation möchten Sie Ereignisse so behandeln, wie sie sprudeln, und nicht, wenn sie erfasst werden. Dies ist nützlich, wenn Sie die Ereignisdelegierung für Dinge wie "Fokus" -Ereignisse für Textfelder verwenden, die nicht sprudeln.

Dan Herbert
quelle
2

Ab IE11 müssen Sie verwenden addEventListener. attachEventist veraltet und wirft einen Fehler aus.

Will Mainwaring
quelle
0

Wie PPK hier hervorhebt, können Sie im IE auch verwenden

e.cancelBubble = true;
magikMaker
quelle
0

Bei Verwendung von <meta http-equiv="X-UA-Compatible" content="IE=9">IE9 + wird dies unterstützt, addEventListenerindem das "Ein" im Ereignisnamen wie folgt entfernt wird:

 var btn1 = document.getElementById('btn1');
 btn1.addEventListener('mousedown', function() {
   console.log('mousedown');
 });
Basiphobe
quelle
0

Das Problem ist, dass der IE nicht über die Standardmethode verfügt addEventListener. IE verwendet seine eigene, attachEventdie so ziemlich das gleiche tut.

Eine gute Erklärung der Unterschiede und auch des 3. Parameters finden Sie im Quirksmode .

Jani Hartikainen
quelle