ウィンドウのサイズを変えていないのに window.resize イベントが発生する

| コメントをどうぞ

IE8で、ウィンドウの大きさを変えていないのに window.resize イベントが発生することがあります。

再現方法

ドキュメント内で要素の高さを変更するだけで再現します。

以下、サンプルHTMLです。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script>
    function resized(e){
      alert("window resized!");
    }
    function doResize(){
      document.getElementById("field").style.height = "100px"
    }
    if (window.addEventListener) {
      window.addEventListener("resize", resized, false);
    }
    else {
      window.attachEvent("onresize", resized);
    }
    </script>
  </head>
  <body style="background-color:green;">
    <input type="button" id="doResize" value="ResizeTest" onclick="doResize()">
  <div id="field" style="background-color:#000000;color:#FFF;">リサイズテスト</div>
  </body>
</html>

「ResizeTest」ボタンを押すことでDIV要素の高さが 100px に変更されます。すると、window.resize イベントに仕込んだ resized 関数が実行されてしまいます。

window.resize イベントに重めの処理を登録している場合など、注意が必要です。

Quirksモードでは発生しない

この問題、Quirksモードでは発生しません。

これから「Quirksモードやめて標準にする!」という方は要注意です。

どうすれば防げるの

ウィンドウリサイズイベントで呼び出された関数内で本当にウィンドウリサイズを行われたか確認します。

悲しいですがこれしか回避方法が見つかりませんでした。(Quirksモードにする、というのは無しで)

あらかじめ ウィンドウのサイズを取っておき、resized 関数でチェックを入れます。

var lastWinWidth = document.documentElement.clientWidth;
var lastWinHeight = document.documentElement.clientHeight;
function resized(e){
 var newWinWidth = document.documentElement.clientWidth;
 var newWinHeight = document.documentElement.clientHeight;

  if(newWinWidth != lastWinWidth || newWinHeight != lastWinHeight){
    lastWinWidth = newWinWidth;
    lastWinHeight = newWinHeight;

    alert("window resized!");
  }
}

すべてのリサイズイベントでこのチェックを行うのはつらいので、汎用的な関数にする、window.resize イベントは一つにまとめる、などの対応が必要になるかと思います。

追記1: jQuery は対応しているかなと思って試しましたが、ダメでした。

追記2: ひょっとしたらイベントオブジェクトで判定ができるかもしれません。 判明次第追記します

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>