IE8とIE9pp の非互換性(event)

js IE9 DOM

IE9正式版ではなく IE9pp(IE9 Platform Preview) や IE9pp2 の現状について記載しています。

IE9ppがDOMの仕様に合わせたため、IE8までとは互換性がなくなっている部分をちょこちょこ書いていきます。

IE9pp の event

イベントハンドラが受け取る event オブジェクトは DOM Level3 Event の仕様に従うようになりました。

IE9pp では event.button の値が変化

event.button の値が 0(left click), 1(mid click), 2(right click) になりました。

IE8 までは各ボタンの同時押しを判定できたため、どのボタンが押されているかはビットアンドで比較する必要がありました。

  • event.button & 0x1 が true なら left click
  • event.button & 0x4 が true なら mid click
  • event.button & 0x2 が true なら right click
これからはこんな感じになります
function handleEvent(event) {
  if (IE6 || IE7 || IE8) {

      event = event || window.event;

      var msg = [];

      if (event.button & 1) {
          msg.push("left");
      }
      if (event.button & 2) {
          msg.push("right");
      }
      if (event.button & 4) {
          msg.push("mid");
      }
      msg.length && alert(msg.join(" ") + " button");
  } else {
      // IE9pp, Gecko, WebKit, Opera
      switch (event.button) {
      case 0: alert("left button"); break;
      case 1: alert("mid button"); break;
      case 2: alert("right button");
      }
  }
}

node.addEventListener("mousedown", handleEvent, false);

event.button は DOM 仕様に従うようになりましたが、window.event.button の値は IE8 と同じものが取れてきます。
あまり良い案ではありませんが、IE8 までのコードを生かしたい場合は、window.event.button を見るようにコードを修正する逃げ方もできそうです。

event.offsetX/Y が無い

IE9pp2 でも event.offsetX/Y が実装されていません。
他のブラウザと互換性がなく、IE8とも互換性がありません。

cloneNode でイベントもクローンされてしまう

IE8 までは cloneNode でイベントもクローンされていましたが、IE9pp2 でも同様です。
他のブラウザと互換性がありません。

IE9pp2 は DOMContentLoaded をサポート済み

DOMContentLoaded はIE9pp2で既に動きます。
http://blogs.msdn.com/ie/archive/2010/03/26/dom-level-3-events-support-in-ie9.aspx

<!doctype html><script>document.addEventListener("DOMContentLoaded",function(){alert(9)},false)</script>

また後で追記します。