Javascript의 MSIE 및 addEventListener 문제?


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

Chrome / Safari에서는 페이지의 콘텐츠를 복사 할 때 위의 "beforecopy"기능이 실행됩니다. MSIE는이 기능도 지원해야하지만 어떤 이유로 다음 오류가 발생합니다.

"개체가이 속성 또는 메서드를 지원하지 않습니다."

이제 Internet Explorer가 본문 노드와 함께 작동하지 않는다는 것을 이해했지만 ID로 노드를 제공하면 제대로 작동한다고 생각했을 것입니다. 아무도 내가 뭘 잘못하고 있는지에 대한 아이디어가 있습니까? 미리 감사드립니다.

** 세 번째 매개 변수 "False"가 무엇에 좋은지 말해 줄 수있는 사람에게는 보너스 포인트입니다.


다음은 캡처 단계를 useCapture잘 설명하는 좋은 기사입니다 . coding.smashingmagazine.com/2013/11/12/…
feeela

답변:


185

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

여기 에서 위 코드의 예를 실행할 수 있습니다 .

의 세 번째 인수 addEventListeneruseCapture; 참이면 사용자가 이벤트 캡처 를 시작하려고 함을 나타냅니다 .


1
귀하의 답변에 감사드립니다. 방금 게시 한 내용을 시도했는데 효과가있었습니다. 지금 저를 버리는 것은 "복사"이벤트가 작동하지 않지만 "onclick"이벤트가 작동한다는 것입니다. 특히, quirksmode가 작동해야한다고 명시하기 때문에 이상합니다. quirksmode.org/dom/events/cutcopypaste.html 아이디어가 있습니까?
Matrym 2009

그 댓글을 긁으세요. 방금 보낸 것을 격리하고 시도했으며 클릭하여 복사를 변경하면 작동합니다. 다시 한 번 감사드립니다.
Matrym 2009

1
Microsoft의 자체 설명서에 왜 사용이 표시 addEventListener됩니까? msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx
wmarbut 2013

@wmarbut addEventListener가 IE9에 추가되었습니다. attachEvent는 IE 11에서 제거되었습니다. 원래 질문은 2009 년부터입니다. CMS는 IE 11에서도 계속 작동하는 정확하고 강력한 방법을 제공했습니다.
Colin Young

인트라넷 사이트에 대한 설정이 호환성 모드로 설정되어 있기 때문에 인터넷에서는 작동하지만 인트라넷에서는 작동하지 않는 이유를 설명합니다.
Roger Perkins

32

JQuery 2.x를 사용하는 경우 다음을 추가하십시오.

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

이것은 나를 위해 일했습니다.


3
IE 버전 <= 8을 실행하는 경우 문제가 해결되지 않습니다.
ninjaneer 2014-08-20

5

추가해보십시오

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

여는 헤드 태그 바로 뒤에


2
IE 버전 <= 8을 실행하는 경우 문제가 해결되지 않습니다.
ninjaneer 2014-08-20

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더 이상 사용되지 않으며 오류가 발생합니다.


0

PPK가 지적 하듯이 여기에 , IE에서 당신은 또한 사용할 수 있습니다

e.cancelBubble = true;

0

를 사용 <meta http-equiv="X-UA-Compatible" content="IE=9">하면 IE9 +는 addEventListener다음과 같이 이벤트 이름에서 "on"을 제거하여 지원 합니다.

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

0

문제는 IE에 표준 addEventListener방법 이 없다는 것 입니다. IE는 attachEvent거의 동일한 기능을하는 자체 를 사용합니다 .

차이점에 대한 좋은 설명과 세 번째 매개 변수에 대한 설명은 quirksmode에서 찾을 수 있습니다 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.