web-dev-qa-db-ja.com

JavaScriptのMSIEとaddEventListenerの問題？

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

Chrome/Safariでは、ページ上のコンテンツがコピーされているときに上記の「beforecopy」機能が実行されます。 MSIEはこの機能もサポートすることになっていますが、何らかの理由でこのエラーが発生しています。

「オブジェクトはこのプロパティまたはメソッドをサポートしていません」

さて、Internet Explorerはbodyノードで動作しないことを理解していますが、IDでノードを提供することはうまくいくと思っていたでしょう。誰かが私が間違っていることについてアイデアを持っていますか？前もって感謝します。

** 3番目のパラメーター「False」の利点を教えてくれる人にはボーナスポイント。

javascriptinternet-exploreraddeventlistener
84
Matrym

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

上記のコードの例を実行できます here 。

addEventListenerの3番目の引数はuseCaptureです。 trueの場合、ユーザーが event capture を開始したいことを示します。

184
CMS

JQuery 2.xを使用している場合は、次を追加してください。

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

これは私のために働いた。

30
Aarif

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モデルの3番目の引数は、 バブリングイベントとキャプチャイベントの違い に関係しています。ほとんどすべての状況で、キャプチャされたときではなく、バブルが発生したときにイベントを処理する必要があります。 event delegation を、テキストボックスの「フォーカス」イベントなど、バブルしないものに使用する場合に役立ちます。

5
Dan Herbert

追加してみてください

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

オープニングヘッドタグの直後

5
130nk3r5

IE11の時点では、addEventListenerを使用する必要があります。 attachEventは廃止され、エラーがスローされます。

1
Will Mainwaring

問題は、IEに標準のaddEventListenerメソッドがないことです。 IEは独自のattachEventを使用しますが、これはほとんど同じです。

違いの良い説明と、3番目のパラメーターについても見つけることができます at quirksmode 。

0
Jani Hartikainen

PPKが here を指摘しているので、IEでも使用できます

e.cancelBubble = true;
0
magikMaker

<meta http-equiv="X-UA-Compatible" content="IE=9">を使用すると、IE9 +は次のようにイベント名の「on」を削除することでaddEventListenerをサポートします。

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