MSIE y addEventListener ¿Problema en Javascript?

84

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

En Chrome / Safari, lo anterior ejecutará la función "beforecopy" cuando se esté copiando el contenido de la página. Se supone que MSIE también es compatible con esta funcionalidad, pero por alguna razón recibo este error:

"El objeto no admite esta propiedad o método"

Ahora, tengo entendido que Internet Explorer no jugará con el nodo del cuerpo, pero habría pensado que proporcionar un nodo por ID funcionaría bien. ¿Alguien tiene alguna idea sobre lo que estoy haciendo mal? Gracias por adelantado.

** Puntos de bonificación para cualquiera que pueda decirme para qué sirve el tercer parámetro "Falso".

javascript internet-explorer addeventlistener

— Matrym
fuente

Aquí hay un buen artículo que explica useCapturemuy bien la fase de captura : coding.smashingmagazine.com/2013/11/12/…

— feeela

185

En IE tienes que usar en attachEventlugar del estándar addEventListener.

Una práctica común es verificar si el addEventListenermétodo está disponible y usarlo; de lo contrario, use attachEvent:

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

Puedes hacer una función para hacerlo:

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

Puede ejecutar un ejemplo del código anterior aquí .

El tercer argumento de addEventListeneres useCapture; si es verdadero, indica que el usuario desea iniciar la captura de eventos .

— Christian C. Salvadó
fuente

1

Agradezco su respuesta. Intenté lo que publicaste y funcionó. Lo que me está confundiendo ahora es que el evento "copiar" no funciona, pero el evento "onclick" sí. Específicamente, esto es extraño porque quirksmode establece que debería funcionar: quirksmode.org/dom/events/cutcopypaste.html ¿ Alguna idea?

— Matrym

Elimina ese comentario. Solo aislé y probé lo que enviaste, y cambiar el clic para copiar funciona. Gracias de nuevo.

— Matrym

1

¿Por qué la propia documentación de microsoft muestra el uso addEventListenerentonces? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

— wmarbut

@wmarbut addEventListener se agregó, creo, IE9. attachEvent se eliminó en IE 11. La pregunta original es de 2009. CMS ha proporcionado el método correcto y sólido que sigue funcionando incluso con IE 11.

— Colin Young

Eso explica por qué funciona en Internet pero no en la intranet para mí, porque tengo mi configuración para los sitios de la intranet configurada en modo de compatibilidad.

— Roger Perkins

32

En caso de que esté utilizando JQuery 2.x, agregue lo siguiente en el

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

Esto funcionó para mí.

— Aarif
fuente

3

para aquellos que ejecutan versiones de IE <= 8, esto no solucionará el problema.

— ninjaneer

5

intenta agregar

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

justo después de la etiqueta de la cabeza de apertura

— 130nk3r5
fuente

2

para aquellos que ejecutan versiones de IE <= 8, esto no solucionará el problema.

— ninjaneer

5

Internet Explorer (IE8 y versiones anteriores) no es compatible addEventListener(...). Tiene su propio modelo de eventos usando el attachEventmétodo. Podrías usar un código como este:

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

Aunque recomiendo evitar escribir su propio contenedor de manejo de eventos y en su lugar usar un marco de JavaScript (como jQuery , Dojo , MooTools , YUI , Prototype , etc.) y evitar tener que crear la solución para esto por su cuenta.

Por cierto, el tercer argumento en el modelo de eventos del W3C tiene que ver con la diferencia entre burbujear y capturar eventos . En casi todas las situaciones, querrá manejar los eventos a medida que burbujean, no cuando se capturan. Es útil cuando se usa la delegación de eventos en cosas como eventos de "enfoque" para cuadros de texto, que no aparecen.

— Dan Herbert
fuente

2

A partir de IE11, debe usar addEventListener. attachEventestá en desuso y arroja un error.

— Will Mainwaring
fuente

0

Como PPK señala aquí , en IE también puede usar

e.cancelBubble = true;

— magikMaker
fuente

0

El uso de <meta http-equiv="X-UA-Compatible" content="IE=9">IE9 + es compatible addEventListenercon la eliminación de "on" en el nombre del evento, así:

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

— basifobe
fuente

0

El problema es que IE no tiene el addEventListenermétodo estándar . IE usa su propioattachEvent que hace prácticamente lo mismo.

En quirksmode se puede encontrar una buena explicación de las diferencias y también sobre el tercer parámetro .

— Jani Hartikainen
fuente