MSIE i addEventListener Problem w JavaScript?

84

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

W przeglądarce Chrome / Safari powyższe spowoduje uruchomienie funkcji „beforecopy” podczas kopiowania zawartości strony. MSIE ma również obsługiwać tę funkcję, ale z jakiegoś powodu otrzymuję ten błąd:

„Obiekt nie obsługuje tej właściwości lub metody”

Rozumiem, że Internet Explorer nie będzie grał z węzłem treści, ale pomyślałbym, że podanie węzła według identyfikatora będzie działać dobrze. Czy ktoś ma jakieś pomysły na temat tego, co robię źle? Z góry dziękuję.

** Dodatkowe punkty dla każdego, kto może mi powiedzieć, do czego służy trzeci parametr „Fałsz”.

javascript internet-explorer addeventlistener

— Matrym
źródło

Oto dobry artykuł, który wyjaśnia fazę przechwytywania i useCapturebardzo dobrze: coding.smashingmagazine.com/2013/11/12/...

— feeela

185

W IE musisz używać attachEventzamiast standardu addEventListener.

Powszechną praktyką jest sprawdzenie, czy addEventListenermetoda jest dostępna i zastosowanie jej, w przeciwnym razie użyj attachEvent:

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

Możesz utworzyć funkcję, aby to zrobić:

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

Można uruchomić przykład powyższy kod tutaj .

Trzeci argument addEventListenerjest useCapture; jeśli prawda, wskazuje, że użytkownik chce zainicjować przechwytywanie zdarzeń .

— Christian C. Salvadó
źródło

1

Doceniam twoją odpowiedź. Właśnie wypróbowałem to, co opublikowałeś i zadziałało. Rzecz, która mnie teraz odrzuca, to fakt, że zdarzenie „copy” nie działa, ale zdarzenie „onclick” działa. W szczególności jest to dziwne, ponieważ quirksmode stwierdza, że powinien działać: quirksmode.org/dom/events/cutcopypaste.html Jakieś pomysły?

— Matrym

Podrap ten komentarz. Po prostu wyodrębniłem i wypróbowałem to, co wysłałeś, a zmiana funkcji „kliknij, aby skopiować” działa. Dzięki jeszcze raz.

— Matrym

1

dlaczego własna dokumentacja firmy Microsoft pokazuje użycie addEventListener? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

— wmarbut

1

@wmarbut addEventListener został dodany, jak sądzę, IE9. attachEvent została usunięta w IE 11. Oryginalne pytanie pochodzi z 2009 roku. CMS dostarczył poprawną, solidną metodę, która nadal działa nawet z IE 11.

— Colin Young

To wyjaśnia, dlaczego działa w Internecie, ale nie w intranecie, ponieważ mam ustawienia dla witryn intranetowych ustawione na tryb zgodności.

— Roger Perkins

32

Jeśli używasz JQuery 2.x, dodaj następujące elementy w

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

To zadziałało dla mnie.

— Aarif
źródło

4

w przypadku wersji IE <= 8 nie rozwiąże to problemu.

— ninjaneer

5

spróbuj dodać

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

zaraz po otwierającym tagu head

— 130nk3r5
źródło

3

w przypadku wersji IE <= 8 nie rozwiąże to problemu.

— ninjaneer

5

Internet Explorer (IE8 i starsze) nie obsługuje addEventListener(...). Posiada własny model zdarzeń wykorzystujący tę attachEventmetodę. Możesz użyć takiego kodu:

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

Chociaż zalecam unikanie pisania własnego opakowania obsługi zdarzeń i zamiast tego używać frameworka JavaScript (takiego jak jQuery , Dojo , MooTools , YUI , Prototype itp.) I unikać konieczności samodzielnego tworzenia poprawki.

Nawiasem mówiąc, trzeci argument w modelu zdarzeń W3C dotyczy różnicy między bulgotaniem a przechwytywaniem zdarzeń . W prawie każdej sytuacji będziesz chciał obsługiwać wydarzenia w momencie ich bąblowania, a nie w momencie ich przechwycenia. Jest to przydatne w przypadku delegowania zdarzeń do takich elementów, jak zdarzenia „fokus” dla pól tekstowych, które nie są bąbelkami.

— Dan Herbert
źródło

2

Od IE11 musisz używać addEventListener. attachEventjest przestarzały i zgłasza błąd.

— Will Mainwaring
źródło

0

Jak wskazuje tutaj PPK , w IE można również używać

e.cancelBubble = true;

— magikMaker
źródło

0

Używanie <meta http-equiv="X-UA-Compatible" content="IE=9">IE9 + obsługuje addEventListenerpoprzez usunięcie „on” w nazwie wydarzenia, na przykład:

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

— basiphobe
źródło

0

Problem w tym, że IE nie ma standardowej addEventListenermetody. IE używa własnego, attachEventktóry robi prawie to samo.

Dobre wyjaśnienie różnic, a także trzeciego parametru, można znaleźć w quirksmode .

— Jani Hartikainen
źródło