為什么我的網站上出現參考錯誤和語法錯誤？

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上，而不要附加到窗口和/或在主體末尾附加utils.js。 我認為問題是尚未創建<canvas></canvas>元素

為什么我的網站上出現參考錯誤和語法錯誤？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-24 18:31:50

解決方案2
0 2016-02-24 18:28:17

為什么我的網站上出現參考錯誤和語法錯誤？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-24 18:31:50

解決方案2 0 2016-02-24 18:28:17

解決方案1
2 已采納 2016-02-24 18:31:50

解決方案2
0 2016-02-24 18:28:17