MSIE y addEventListener ¿Problema en Javascript?

Question 1

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".

Question 2

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 .

Question 3

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í.

Question 4

intenta agregar

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

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

Question 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.

Question 6

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

Question 7

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

e.cancelBubble = true;

Question 8

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

Question 9

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 .

Answer 1

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".

Answer 2

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

feeela

Answer 3

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

Answer 4

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

Answer 5

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

Matrym

Answer 6

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

Answer 7

@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

Answer 8

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

Answer 9

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

Answer 10

3

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

ninjaneer

Answer 11

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

Answer 12

2

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

ninjaneer

Answer 13

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.

Answer 14

2

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

Will Mainwaring
fuente

Answer 15

0

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

e.cancelBubble = true;

magikMaker
fuente

Answer 16

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

Answer 17

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 .

MSIE y addEventListener ¿Problema en Javascript?

Respuestas: