Question

我正在尝试设置一些样板代码，但我遇到了两个错误。第一个是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>元素尚未创建

为什么我的网站上出现参考错误和语法错误？

2 个答案: