2012-02-20 1 views
0

では動作しません:this.style.backgroundColorは私のコードはIE7/8

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     p{ 
      border:1px solid #CCC; 
      margin:5px; 
      padding:5px; 
     } 
    </style> 
    <script type="text/javascript"> 
     window.onload = changeColor; 
     function changeColor() { 
      for(var i =0; i < document.getElementById("main").getElementsByTagName("p").length; i++) { 
       var obj = document.getElementById("main").getElementsByTagName("p")[i]; 
       if (window.addEventListener) { 
        obj.addEventListener('mousemove', function() { 
         this.style.backgroundColor ="#EEE"; 
        }, false); 
        obj.addEventListener('mouseout', function() { 
         this.style.backgroundColor ="#FFF"; 
        }, false); 
       } else if (window.attachEvent) { 
        //for ie 
        obj.attachEvent('onmousemove', function() { 
         this.style.backgroundColor ="#EEE"; 
        }); 
        obj.attachEvent('onmouseout', function() { 
         this.style.backgroundColor ="#FFF"; 
        }); 
       } 
      } 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <p>1</p> 
     <div id="main"> 
      <p>2.1</p> 
      <p>2.2</p> 
      <p>2.3</p> 
     </div> 
    </div> 
</body> 
</html> 

それはクロム、FirefoxとIE9でうまく動作しますが、IE7/8

で作業することはできませんエラーメッセージは次のとおりです: "backgroundColor"のプロパティ値を設定できません:オブジェクトがnullまたは定義されていません

私とは何ですか?

答えて

1

IEでattachEventを使用する場合、オブジェクトにはthisが設定され、イベントが発生したオブジェクトには設定されません。

IEでは、グローバル変数window.event.srcElementにイベントのターゲットオブジェクトが含まれます。

あなたはすべてのイベントハンドラは、同じように機能させるために回避策このようにコーディングできます

function hookEvent(event, obj, fn) { 
    if (obj.addEventListener) { 
     obj.addEventListener(event, fn, false); 
    } else { 
     obj.attachEvent("on" + event, function() {return(fn.call(obj, window.event));}); 
    } 
} 

thisがイベントのソースオブジェクトに設定し、引数ことをされるように、これはそれを作るだろうイベントハンドラにはイベントオブジェクトがあります。

+0

'attachEvent()'を 'addEventListener()'のように動作させるヘルパー関数を追加しました。 – jfriend00

0

thisは、IEのattachEventのソースエレメントにバインドされていません。

代わりにevent.srcElementを使用してください。

また、eventグローバルオブジェクトプロパティとそのsrcElementプロパティもIE固有です。