1

Chrome コンソールで何千ものエラーがスローされることに気付いたとき、この小さなマウス トラッキングの例をまとめてみました。

Uncaught TypeError: Cannot read property 'clientX' of undefined

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

<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>

4

2 に答える 2

5

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

これが実際の例です。

呼び出しに正当な理由があった場合は、setTimeout一見必要な理由がわからないため、説明する必要があります。ちなみに、に文字列を渡すことsetTimeoutは一般的に悪い習慣と見なされます（これはのエイリアスですeval）。関数への参照を渡すだけです。

于 2012-04-23T19:09:20.660 に答える
0

update実際には、 inから括弧を削除するだけsetTimeoutで機能し、コンソールにエラーは表示されません。

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

setTimeout関数の結果ではなく、関数を に渡す必要があります。文字列でない場合はなおさらです。

于 2012-04-23T19:38:24.287 に答える