web-dev-qa-db-fra.com

MSIE et addEventListener Un problème en Javascript?

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

Dans Chrome/Safari, ce qui précède exécute la fonction "beforecopy" lors de la copie du contenu de la page. MSIE est supposé prendre en charge cette fonctionnalité également, mais pour une raison quelconque, j'obtiens cette erreur:

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

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 correctement. Est-ce que quelqu'un a des idées sur ce que je fais mal? Merci d'avance.

** Points bonus pour tous ceux qui peuvent me dire à quoi sert le troisième paramètre "Faux".

javascriptinternet-exploreraddeventlistener
78
Matrym

Dans IE, vous devez utiliser attachEvent plutôt que le standard addEventListener .

Une pratique courante consiste à vérifier si la méthode addEventListener 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 addEventListener est useCapture; Si la valeur est true, cela indique que l'utilisateur souhaite lancer la capture d'événement .

178
CMS

Si vous utilisez JQuery 2.x, veuillez ajouter les éléments suivants dans le

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

Cela a fonctionné pour moi.

28
Aarif

Internet Explorer (IE8 et inférieur) ne prend pas en charge addEventListener(...) . Il a son propre modèle d'événement utilisant la méthode attachEvent . Vous pourriez 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 plutôt un framework JavaScript (tel que jQuery , Dojo , MooTools , YUI , Prototype , etc.) et évitez de créer vous-même le correctif.

Soit dit en passant, le troisième argument du modèle d'événements du W3C a trait à la différence entre les événements bouillonnants et les événements capturés . Dans presque toutes les situations, vous voudrez gérer les événements lors de la formation de bulles, et non lors de leur capture. C'est utile lorsque vous utilisez délégation des événements sur des éléments tels que les événements "focus" pour les zones de texte, qui ne sont pas masquées. 

4
Dan Herbert

essayez d'ajouter 

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

juste après l'étiquette de tête d'ouverture

4
130nk3r5

A partir de IE11, vous devez utiliser addEventListener. attachEvent est obsolète et génère une erreur.

1
Will Mainwaring

Le problème est que IE ne possède pas la méthode addEventListener standard. IE utilise sa propre variable attachEvent, qui a sensiblement la même fonction.

On peut trouver une bonne explication des différences et du troisième paramètre at quirksmode .

0
Jani Hartikainen

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

e.cancelBubble = true;
0
magikMaker

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

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