1

当我意识到这个小鼠标跟踪示例时，我只是将这个小鼠标跟踪示例放在一起，它会在 chrome 控制台中引发数千个错误。

Uncaught TypeError: Cannot read property 'clientX' of undefined

AFAIK 这意味着，chrome 找不到该属性所属的对象。但是如果我打开这个例子，它会很好地显示正确的坐标。请帮助我摆脱这些无用的错误。

<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

实际上，如果您只是从updatein 中删除括号setTimeout，它就可以工作并且不会在控制台中引发任何错误。

它应该setTimeout("update",10)代替setTimeout("update()",10).

您需要将一个函数传递给setTimeout，而不是一个函数的结果。如果不是字符串就更好了。

于 2012-04-23T19:38:24.287 回答