MSIE e addEventListener Problema em Javascript?

85

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

No Chrome / Safari, o acima irá executar a função "beforecopy" quando o conteúdo da página estiver sendo copiado. O MSIE também deve oferecer suporte a essa funcionalidade, mas, por algum motivo, estou recebendo este erro:

"O objeto não suporta esta propriedade ou método"

Agora, é meu entendimento que o Internet Explorer não brinca com o nó do corpo, mas eu pensei que fornecer um nó por ID funcionaria bem. Alguém tem alguma ideia sobre o que estou fazendo de errado? Desde já, obrigado.

** Pontos de bônus para quem puder me dizer para que serve o terceiro parâmetro "False".

javascript internet-explorer addeventlistener

— Matrym
fonte

Aqui está um bom artigo que explica a fase de captura e useCapturemuito bem: coding.smashingmagazine.com/2013/11/12/…

— feeela

186

No IE, você deve usar attachEventem vez do padrãoaddEventListener .

Uma prática comum é verificar se o addEventListenermétodo está disponível e usá-lo, caso contrário, use attachEvent:

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

Você pode criar uma função para isso:

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

Você pode executar um exemplo do código acima aqui .

O terceiro argumento de addEventListeneré useCapture; se verdadeiro, indica que o usuário deseja iniciar a captura de eventos .

— Christian C. Salvadó
fonte

1

Agradeço sua resposta. Acabei de testar o que você postou e funcionou. O que está me confundindo agora é que o evento "copy" não está funcionando, mas o evento "onclick" está. Especificamente, isso é estranho porque o quirksmode afirma que deve funcionar: quirksmode.org/dom/events/cutcopypaste.html Alguma ideia?

— Matrym

Raspe esse comentário. Eu apenas isolei e tentei o que você enviou, e mudar o clique para copiar funcionou. Obrigado novamente.

— Matrym

1

por que a própria documentação da Microsoft mostra o uso do addEventListenerthen? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

— wmarbut

1

@wmarbut addEventListener foi adicionado, creio eu, ao IE9. attachEvent foi removido do IE 11. A pergunta original é de 2009. CMS forneceu o método correto e robusto que continua a funcionar mesmo com o IE 11.

— Colin Young

Isso explica por que funciona na Internet, mas não na intranet para mim, porque minhas configurações para sites da intranet estão definidas para o modo de compatibilidade.

— Roger Perkins

32

Caso você esteja usando JQuery 2.x, adicione o seguinte no

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

Isso funcionou para mim.

— Aarif
fonte

4

para aqueles que executam versões do IE <= 8, isso não resolverá o problema.

— ninjaneer de

5

tente adicionar

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

logo após a tag de abertura

— 130nk3r5
fonte

3

para aqueles que executam versões do IE <= 8, isso não resolverá o problema.

— ninjaneer de

5

O Internet Explorer (IE8 e inferior) não é compatível addEventListener(...). Ele tem seu próprio modelo de evento usando o attachEventmétodo. Você poderia usar algum 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);
}

Embora eu recomende evitar escrever seu próprio wrapper de manipulação de eventos e, em vez disso, usar uma estrutura JavaScript (como jQuery , Dojo , MooTools , YUI , Prototype , etc) e evitar ter que criar a correção para isso por conta própria.

A propósito, o terceiro argumento no modelo W3C de eventos tem a ver com a diferença entre borbulhar e capturar eventos . Em quase todas as situações, você desejará lidar com os eventos enquanto eles borbulham, não quando são capturados. É útil ao usar a delegação de eventos em coisas como eventos de "foco" para caixas de texto, que não borbulham.

— Dan Herbert
fonte

2

A partir do IE11, você precisa usar addEventListener. attachEventestá obsoleto e gera um erro.

— Will Mainwaring
fonte

0

Como PPK aponta aqui , no IE, você também pode usar

e.cancelBubble = true;

— magikMaker
fonte

0

Usando <meta http-equiv="X-UA-Compatible" content="IE=9">, o IE9 + oferece suporte addEventListenerremovendo o "on" no nome do evento, como este:

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

— basifóbico
fonte

0

O problema é que o IE não possui o addEventListenermétodo padrão . O IE usa o seu próprio, attachEventque faz praticamente o mesmo.

Uma boa explicação das diferenças e também sobre o terceiro parâmetro pode ser encontrada em quirksmode .

— Jani Hartikainen
fonte