Question

当我意识到它在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>

Answer 1

删除对setTimeout的调用以防止出错。之所以会发生这种情况是因为update函数需要一个事件对象，当您通过setTimeout调用该函数时，该事件对象不会传入。因此e未定义，您会收到错误。

这是working example。

如果setTimeout来电有充分的理由，你需要解释一下，因为我无法弄清楚为什么乍看之下需要它们。作为旁注，将字符串传递给setTimeout通常被认为是不好的做法（它是eval的别名）。您只需传递对该函数的引用即可。

Answer 2

实际上，如果您只是从update中的setTimeout删除括号，它就会起作用，并且不会在控制台中抛出任何错误。

应该是setTimeout("update",10)而不是setTimeout("update()",10)。

您需要将函数传递给setTimeout，而不是将其传递给{{1}}。如果它不是一个字符串，那就更好了。

javascript的onmousemove / event.clientX正在运行，但会抛出错误

2 个答案: