MSIE e addEventListener Problema in Javascript?

84

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

In Chrome / Safari, quanto sopra eseguirà la funzione "beforecopy" quando il contenuto della pagina viene copiato. MSIE dovrebbe supportare anche questa funzionalità, ma per qualche motivo ricevo questo errore:

"L'oggetto non supporta questa proprietà o metodo"

Ora, mi risulta che Internet Explorer non giocherà con il nodo body, ma avrei pensato che fornire un nodo tramite ID avrebbe funzionato bene. Qualcuno ha qualche idea su cosa sto facendo di sbagliato? Grazie in anticipo.

** Punti bonus per chiunque possa dirmi a cosa serve il 3 ° parametro "False".

javascript internet-explorer addeventlistener

— Matrym
fonte

Ecco un buon articolo che spiega useCapturemolto bene la fase di cattura : coding.smashingmagazine.com/2013/11/12/…

— feeela

185

In IE devi usare attachEventpiuttosto che lo standard addEventListener.

Una pratica comune è controllare se il addEventListenermetodo è disponibile e utilizzarlo, altrimenti utilizzare attachEvent:

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

Puoi creare una funzione per farlo:

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

Puoi eseguire un esempio del codice sopra qui .

Il terzo argomento di addEventListenerè useCapture; se vero, indica che l'utente desidera avviare l' acquisizione di eventi .

— Christian C. Salvadó
fonte

1

Apprezzo la tua risposta. Ho appena provato quello che hai pubblicato e ha funzionato. La cosa che mi sconcerta ora è che l'evento "copia" non funziona, ma lo è l'evento "onclick". In particolare, questo è strano perché quirksmode afferma che dovrebbe funzionare: quirksmode.org/dom/events/cutcopypaste.html Qualche idea?

— Matrym

Gratta quel commento. Ho appena isolato e provato ciò che hai inviato e la modifica del clic per copiare funziona. Grazie ancora.

— Matrym

1

perché la documentazione di Microsoft mostra l'utilizzo di addEventListenerallora? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

— wmarbut

@wmarbut addEventListener è stato aggiunto, credo, IE9. attachEvent è stato rimosso in IE 11. La domanda originale è del 2009. CMS ha fornito il metodo corretto e robusto che continua a funzionare anche con IE 11.

— Colin Young

Questo spiega perché funziona su Internet ma non sull'Intranet per me, perché le mie impostazioni per i siti Intranet sono impostate sulla modalità di compatibilità.

— Roger Perkins

32

Se utilizzi JQuery 2.x, aggiungi quanto segue nel file

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

Questo ha funzionato per me.

— Aarif
fonte

3

per quelli che eseguono versioni di IE <= 8, questo non risolverà il problema.

— Ninjaneer

5

prova ad aggiungere

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

subito dopo il tag head di apertura

— 130nk3r5
fonte

2

per quelli che eseguono versioni di IE <= 8, questo non risolverà il problema.

— Ninjaneer

5

Internet Explorer (IE8 e versioni precedenti) non supporta addEventListener(...). Ha il proprio modello di eventi utilizzando il attachEventmetodo. Potresti usare un codice come questo:

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

Anche se consiglio di evitare di scrivere il tuo wrapper di gestione degli eventi e invece di utilizzare un framework JavaScript (come jQuery , Dojo , MooTools , YUI , Prototype , ecc.) Ed evitare di dover creare la correzione per questo da solo.

A proposito, il terzo argomento nel modello di eventi W3C ha a che fare con la differenza tra il bubbling e l'acquisizione di eventi . In quasi tutte le situazioni ti consigliamo di gestire gli eventi mentre escono bolle, non quando vengono catturati. È utile quando si utilizza la delega degli eventi su cose come eventi "focus" per le caselle di testo, che non fanno bolle.

— Dan Herbert
fonte

2

A partire da IE11, devi usare addEventListener. attachEventè deprecato e genera un errore.

— Will Mainwaring
fonte

0

Come PPK sottolinea qui , in IE puoi anche usare

e.cancelBubble = true;

— magikMaker
fonte

0

Utilizzando <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9 + supporta la addEventListenerrimozione di "on" nel nome dell'evento, in questo modo:

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

— basifobo
fonte

0

Il problema è che IE non ha il addEventListenermetodo standard . IE usa il proprio attachEventche fa più o meno lo stesso.

Una buona spiegazione delle differenze e anche del 3 ° parametro può essere trovata su quirksmode .

— Jani Hartikainen
fonte