2012-04-23 6 views
1

クロムコンソールに何千ものエラーがスローされていることを知りました。javascriptのonmousemove/event.clientXは動作していますが、エラーをスローします

Uncaught TypeError: Cannot read property 'clientX' of undefined 

AFAIKこれは、このプロパティが属するオブジェクトをクロムで見つけることができないことを意味します。しかし、私が例を開くと、それは右の座標を完全にうまく示しています。これらの役に立たないエラーを取り除くのを助けてください。

<html> 
<head> 
    <style type="text/css"> 
     #tracking { 
      width: 300px; 
      height: 300px; 
      background-size: 300px 300px; 
      background-color: #00F; 
      left: 100px; 
      top: 100px; 
      position: absolute; 
     } 
    </style> 
    <script type="text/javascript"> 
     var mX, mY; 
     var track; 
     document.onmousemove = update; 

     function trackload() 
     { 
      track = document.getElementById("tracking"); 
      setTimeout("update()",10); 
     } 

     function update(e) 
     { 
      mX = e.clientX; 
      mY = e.clientY; 
      if (track) { 
       track.innerHTML = "X: " + mX + " Y: " + mY + " deg: " + (Math.atan(mY/mX) * (180/Math.PI)); 
       track.style.cssText = "-webkit-transform: rotate(" + (Math.atan(mY/mX) * (180/Math.PI)) + "deg);";} 
      setTimeout("update()",10); 
     } 
    </script> 
</head> 
<body> 
    <div id="tracking" onclick="trackload()"></div> 
</body> 

答えて

5

エラーを防ぐためにsetTimeoutへの呼び出しを削除します。 update関数は、setTimeoutで関数を呼び出すときに渡されないイベントオブジェクトを期待しているために発生します。したがって、eは未定義で、エラーが発生します。

ここにはworking exampleがあります。

setTimeoutコールには理由があった場合は、一見するとなぜ必要なのか分かりませんので、説明する必要があります。副次的なことに、文字列をsetTimeoutに渡すことは、一般的に悪い習慣とみなされます(これはevalのエイリアスです)。関数への参照を渡すことができます。

+1

私は今、とても馬鹿だと感じます。それはもちろん、(: – jangxx

0

実際には、updateの括弧をsetTimeoutに削除するだけで、コンソールにエラーは発生しません。

setTimeout("update()",10)の代わりにsetTimeout("update",10)にする必要があります。

setTimeoutに関数を渡す必要があります。その結果は返されません。それが文字列でない場合でもより良い。

関連する問題