Question

为什么我的网站出现引用错误和语法错误？

2016-02-24

114

javascript

我尝试设置一些样板代码，但出现了两个错误。第一个是 utils.js 文件上的意外标记语法错误和 scripts.js 文件中的引用错误。有人能解释为什么在所有内容都正确且被引用的情况下会返回这些错误吗？

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="utils.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <canvas id="main" width="450" height="400"></canvas>
    </body>
</html>

utils.js

var Utils = {
    utils.captureMouse = function(element){
        var mouse = {x: 0, y: 0};

        element.addEventListener("mousemove", function(event){
            var x, y;
            if(event.pageX || event.pageY){
                x = event.pageX;
                y = event.pageY;
            }
            else{
                x = event.ClientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                y = event.ClientY + document.body.scrollTop + document.documentElement.scrollTop;
            }
            x -= element.offsetLeft;
            y -= element.offsetTop;
            mouse.x = x;
            mouse.y = y;
        });
        return mouse;
    }
};

script.js

window.addEventListener("load", function(){
    var canvas = document.getElementById("main");
    var ctx = canvas.getContext("2d");
    mouse = Utils.captureMouse(canvas);

    canvas.addEventListener("mousedown", function(){
        console.log("X: " +mouse.x);
        console.log("Y: " +mouse.y);
    })
})

错误如下

Uncaught SyntaxError: Unexpected token.             utils.js:2
Uncaught ReferenceError: utils is not defined       script.js:4
    (anonymous function) @ script.js:4

Answer 1

这不是有效的语法：

var Utils = {
  utils.captureMouse = function(){/.../}
};

在第二行， utils 未定义。这应该是设置属性，而不是执行赋值操作。也许您指的是这个？：

var Utils = {
  captureMouse: function(){/.../}
};

第二个错误只是第一个错误的结果，因为 Utils 从未有效定义。纠正该错误应该可以纠正这两个错误。

Answer 2

尝试将 eventListener 附加到 document.body 而不是窗口和/或在 body 末尾附加 utils.js。我认为问题在于尚未创建 <canvas></canvas> 元素