MSIE et addEventListener Problème en Javascript?

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

Dans Chrome / Safari, ce qui précède exécutera la fonction «avant la copie» lorsque le contenu de la page est copié. MSIE est également censé prendre en charge cette fonctionnalité, mais pour une raison quelconque, j'obtiens cette erreur:

"L'objet ne prend pas en charge cette propriété ou cette méthode"

Maintenant, je crois comprendre qu'Internet Explorer ne jouera pas avec le nœud du corps, mais j'aurais pensé que fournir un nœud par ID fonctionnerait bien. Quelqu'un a-t-il des idées sur ce que je fais mal? Merci d'avance.

** Des points bonus pour tous ceux qui peuvent me dire à quoi sert le 3ème paramètre "False".

javascript internet-explorer addeventlistener Matrym
la source
Voici un bon article qui explique la phase de capture et useCapturetrès bien: coding.smashingmagazine.com/2013/11/12
...

Réponses:

185

Dans IE, vous devez utiliser attachEventplutôt que la norme addEventListener.

Une pratique courante consiste à vérifier si la addEventListenerméthode est disponible et à l'utiliser, sinon utilisez attachEvent:

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

Vous pouvez créer une fonction pour le faire:

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

Vous pouvez exécuter un exemple du code ci-dessus ici .

Le troisième argument de addEventListenerest useCapture; si c'est vrai, cela indique que l'utilisateur souhaite lancer la capture d'événements .

Christian C. Salvadó
la source
1
J'apprécie votre réponse. J'ai juste essayé ce que vous avez publié et cela a fonctionné. Ce qui me dérange maintenant, c'est que l'événement "copie" ne fonctionne pas, mais l'événement "onclick" l'est. Plus précisément, cela est étrange car quirksmode déclare que cela devrait fonctionner: quirksmode.org/dom/events/cutcopypaste.html Des idées?
Matrym
Grattez ce commentaire. Je viens d'isoler et d'essayer ce que vous avez envoyé, et changer le clic pour copier fonctionne. Merci encore.
Matrym
1
pourquoi la documentation de Microsoft montre-t-elle l'utilisation addEventListeneralors? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
wmarbut
@wmarbut addEventListener a été ajouté, je crois, à IE9. attachEvent a été supprimé dans IE 11. La question d'origine date de 2009. CMS a fourni la méthode correcte et robuste qui continue de fonctionner même avec IE 11.
Colin Young
Cela explique pourquoi cela fonctionne sur Internet mais pas sur l'intranet pour moi, car mes paramètres pour les sites intranet sont définis sur le mode de compatibilité.
Roger Perkins
32

Si vous utilisez JQuery 2.x, veuillez ajouter ce qui suit dans le

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

Cela a fonctionné pour moi.

Aarif
la source
3
pour ceux qui exécutent les versions IE <= 8, cela ne résoudra pas le problème.
ninjaneer
5

essayez d'ajouter 

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

juste après la balise de tête d'ouverture

130nk3r5
la source
2
pour ceux qui exécutent les versions IE <= 8, cela ne résoudra pas le problème.
ninjaneer
5

Internet Explorer (IE8 et inférieur) ne prend pas en charge addEventListener(...). Il a son propre modèle d'événement en utilisant la attachEventméthode. Vous pouvez utiliser un code comme celui-ci:

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

Bien que je recommande d'éviter d'écrire votre propre wrapper de gestion d'événements et d'utiliser à la place un framework JavaScript (tel que jQuery , Dojo , MooTools , YUI , Prototype , etc.) et d'éviter d'avoir à créer le correctif pour cela vous-même.

Soit dit en passant, le troisième argument du modèle d'événements du W3C concerne la différence entre le bouillonnement et la capture d'événements . Dans presque toutes les situations, vous voudrez gérer les événements au fur et à mesure qu'ils bouillonnent, pas lorsqu'ils sont capturés. C'est utile lorsque vous utilisez la délégation d'événements sur des choses comme les événements de "focus" pour les zones de texte, qui ne font pas de bulles.

Dan Herbert
la source
2

À partir d'IE11, vous devez utiliser addEventListener. attachEventest obsolète et génère une erreur.

Will Mainwaring
la source
0

Comme PPK le souligne ici , dans IE, vous pouvez également utiliser

e.cancelBubble = true;
magikMaker
la source
0

En utilisant <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9 + prend en charge addEventListeneren supprimant le "on" dans le nom de l'événement, comme ceci:

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

Le problème est que IE n'a pas la addEventListenerméthode standard . IE utilise le sien attachEventqui fait à peu près la même chose.

Une bonne explication des différences, ainsi que du 3ème paramètre peut être trouvée à quirksmode .

Jani Hartikainen
la source