MSIE i addEventListener Problem w JavaScript?

Question 1

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”.

Question 2

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ń .

Question 3

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.

Question 4

spróbuj dodać

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

zaraz po otwierającym tagu head

Question 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.

Question 6

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

Question 7

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

e.cancelBubble = true;

Question 8

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

Question 9

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 .

Answer 1

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”.

Answer 2

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

feeela

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

1

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

wmarbut

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

4

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

ninjaneer

Answer 11

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

Answer 12

3

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

ninjaneer

Answer 13

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.

Answer 14

2

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

Will Mainwaring
źródło

Answer 15

0

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

e.cancelBubble = true;

magikMaker
źródło

Answer 16

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

Answer 17

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 .

MSIE i addEventListener Problem w JavaScript?

Odpowiedzi: