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

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

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

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

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

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


javascript addeventlistener internet-explorer
person Matrym    schedule 08.11.2009    source источник
comment
Вот хорошая статья, которая очень хорошо объясняет этап захвата и useCapture: coding.smashingmagazine.com/2013/11/12/   -  person feeela    schedule 19.11.2013

Ответы (8)


arrow_upward
186
arrow_downward

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

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

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

person Christian C. Salvadó    schedule 08.11.2009
comment
Я ценю ваш ответ. Я только что попробовал то, что вы написали, и это сработало. Что меня сейчас сбивает с толку, так это то, что событие копирования не работает, а событие onclick работает. В частности, это странно, потому что в quirksmode указано, что он должен работать: quirksmode.org/dom/events. /cutcopypaste.html Есть идеи? - person Matrym; 08.11.2009
comment
Сотри этот комментарий. Я только что изолировал и попробовал то, что вы отправили, и смена клика на копирование работает. Еще раз спасибо. - person Matrym; 08.11.2009
comment
почему тогда собственная документация Microsoft показывает использование addEventListener? msdn.microsoft.com/en-us /library/ie/cc197015(v=vs.85).aspx - person wmarbut; 26.02.2013
comment
@wmarbut addEventListener был добавлен, кажется, в IE9. attachEvent был удален в IE 11. Первоначальный вопрос относится к 2009 году. CMS предоставила правильный, надежный метод, который продолжает работать даже с IE 11. - person Colin Young; 24.04.2014
comment
Это объясняет, почему у меня он работает в Интернете, но не во внутренней сети, потому что мои настройки для сайтов интрасети установлены в режиме совместимости. - person Roger Perkins; 28.11.2016

arrow_upward
32
arrow_downward

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

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

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

person Aarif    schedule 19.08.2014
comment
для тех, кто работает с версиями IE ‹= 8, это не решит проблему. - person ninjaneer; 20.08.2014

arrow_upward
5
arrow_downward

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

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

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

person 130nk3r5    schedule 19.08.2014
comment
для тех, кто работает с версиями IE ‹= 8, это не решит проблему. - person ninjaneer; 20.08.2014

arrow_upward
5
arrow_downward

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 связан с различием между всплывающим и захват событий. Почти в каждой ситуации вы захотите обрабатывать события по мере их появления, а не при захвате. Это полезно при использовании делегирования событий для таких вещей, как события "фокус" для текстовых полей, которые не пузыриться.

person Dan Herbert    schedule 08.11.2009

arrow_upward
2
arrow_downward

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

person Will Mainwaring    schedule 19.11.2013

arrow_upward
0
arrow_downward

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

e.cancelBubble = true;
person magikMaker    schedule 10.10.2011

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

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

person Jani Hartikainen    schedule 08.11.2009