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

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

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

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

Теперь я понимаю, что Internet Explorer не будет играть с телом node, но я думал, что предоставление node по ID будет работать нормально. Есть ли у кого-нибудь идеи о том, что я делаю неправильно? Спасибо заранее.

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

Ответы

Ответ 1

В 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; если true, это означает, что пользователь желает инициировать захват событий.

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

e.cancelBubble = true;

Ответ 8

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

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