Проблема с MSIE и addEventListener в Javascript?

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

В Chrome / Safari вышеуказанное приведет к запуску функции «beforecopy» при копировании содержимого страницы. Предполагается, что MSIE также поддерживает эту функцию, но по какой-то причине я получаю такую ​​ошибку:

«Объект не поддерживает это свойство или метод»

Насколько я понимаю, Internet Explorer не будет играть с основным узлом, но я бы подумал, что предоставление узла по идентификатору будет работать нормально. Есть ли у кого-нибудь представления о том, что я делаю не так? Заранее спасибо.

** Бонусные баллы для тех, кто может сказать мне, для чего подходит третий параметр «Ложь».

javascript internet-explorer addeventlistener Матрым
источник
Вот хорошая статья, которая useCaptureочень хорошо объясняет этап захвата : coding.smashingmagazine.com/2013/11/12/…
Feela

Ответы:

186

В IE нужно использовать, attachEventа не стандарт addEventListener.

Обычная практика - проверить, addEventListenerдоступен ли метод и использовать его, в противном случае используйте attachEvent:

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

Вы можете создать для этого функцию:

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

Вы можете запустить пример приведенного выше кода здесь .

Третий аргумент addEventListenerIS useCapture; если true, это означает, что пользователь желает инициировать захват событий .

Кристиан К. Сальвадо
источник
1
Я ценю твой ответ. Я просто попробовал то, что вы опубликовали, и это сработало. Что меня сейчас сбивает с толку, так это то, что событие «copy» не работает, а событие «onclick» работает. В частности, это странно, потому что quirksmode утверждает, что он должен работать: quirksmode.org/dom/events/cutcopypaste.html Есть идеи?
Matrym 08
Сотрите этот комментарий. Я просто изолировал и попробовал то, что вы отправили, и изменение щелчка для копирования действительно работает. Еще раз спасибо.
Matrym
1
почему собственная документация Microsoft показывает использование addEventListenerтогда? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
wmarbut
1
@wmarbut addEventListener был добавлен, как мне кажется, в IE9. attachEvent был удален в IE 11. Первоначальный вопрос был задан в 2009 году. CMS предоставила правильный, надежный метод, который продолжает работать даже с IE 11.
Колин Янг,
Это объясняет, почему он работает в Интернете, но не в интрасети для меня, потому что мои настройки для сайтов интрасети установлены в режим совместимости.
Роджер Перкинс
32

Если вы используете JQuery 2.x, добавьте в

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

Это сработало для меня.

Аариф
источник
4
для тех, кто использует версии IE <= 8, это не решит проблему.
ninjaneer
5

попробуйте добавить 

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

сразу после открывающего тега заголовка

130nk3r5
источник
3
для тех, кто использует версии IE <= 8, это не решит проблему.
ninjaneer
5

Internet Explorer (IE8 и ниже) не поддерживает addEventListener(...). У него есть собственная модель событий, использующая attachEventметод. Вы можете использовать такой код:

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

Хотя я рекомендую избегать написания собственной оболочки обработки событий и вместо этого использовать среду JavaScript (например, jQuery , Dojo , MooTools , YUI , Prototype и т. Д.) И избегать необходимости создавать исправление для этого самостоятельно.

Между прочим, третий аргумент в модели событий W3C имеет отношение к разнице между всплыванием и захватом событий . Практически в любой ситуации вы захотите обрабатывать события по мере их появления, а не в момент их захвата. Это полезно при использовании делегирования событий для таких вещей, как события «фокус» для текстовых полей, которые не всплывают.

Дэн Герберт
источник
2

Начиная с IE11, вам нужно использовать addEventListener. attachEventустарел и вызывает ошибку.

Will Mainwaring
источник
0

Как указывает здесь PPK , в IE вы также можете использовать

e.cancelBubble = true;
magikMaker
источник
0

Использование <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9 + делает поддержку addEventListenerудалением «на» во имя события, как это:

 var btn1 = document.getElementById('btn1');
 btn1.addEventListener('mousedown', function() {
   console.log('mousedown');
 });
базифоб
источник
0

Проблема в том, что в IE нет стандартного addEventListenerметода. IE использует свой собственный, attachEventкоторый делает почти то же самое.

Хорошее объяснение различий, а также 3-го параметра можно найти в quirksmode .

Яни Хартикайнен
источник