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
source

Voici un bon article qui explique la phase de capture et useCapturetrès bien: coding.smashingmagazine.com/2013/11/12

— ...

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

2

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

— Will Mainwaring
source

0

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

e.cancelBubble = true;

— magikMaker
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
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
source