0

我正在制作一个处于当前状态的节点应用程序非常简单，但是我遇到了一个我无法弄清楚的问题。

我的 express 应用程序生成的 html 如下所示：

<html style="" class=" js no-touch svg inlinesvg svgclippaths no-ie8compat">
<head>
...
<script type="text/javascript" src="/javascripts/mouse.js"></script>
...
</head>
<body class="antialiased" style=""><div class="row"><div class="row">
<script>
var mouse;
var X = 0;
var Y = 0;
window.onload = function()
{
 alert(Mouse());//=> undefined
 mouse = Mouse();

 mouse.setMouseMoveCallback(function(e){ //THIS LINE FAILS: "Cannot call method 'setMouseMoveCallback' of undefined"
  X = e.x;
  Y = e.y;
  alert("move");
 });
}
...
</html>

标头中的 include script 标签添加了这个 javascript 文件：

function Mouse(onObject){
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
mouseDownCount = 0;
var mouseDownCallbacks = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var mouseTracer = 0;
var tracePosArray;
var target = onObject;

if(!onObject){
    onObject = document;
}

onObject.onmousedown = function(evt) { 
    mouseDown[evt.button] = 1;
    mouseDownCount--;
    if(mouseDownCallbacks[evt.button] != 0){
        mouseDownCallbacks[evt.button](evt);
    }
}
onObject.onmouseup = function(evt) {
    mouseDown[evt.button] = 0;
    mouseDownCount--;
}

var mousemoveCallback;
onObject.onmousemove = function(evt){
    //Tracing mouse here:
    if(mouseTracer){
        tracePosArray.push([evt.pageX,evt.pageY]);
    }

    if(mousemoveCallback){
        mousemoveCallback(evt);
    }
}

var mouseWheelCallback;
onObject.onmousewheel = function(evt){
    if(mouseWheelCallback){
        mouseWheelCallback(evt);
    }
}

var mouseOverCallback;
onObject.onmouseover = function(evt){
    if(mouseOverCallback){
        mouseOverCallback(evt);
    }
}

var mouseOutCallback;
onObject.onmouseout = function(evt){
    if(mouseOutCallback){
        mouseOutCallback(evt);
    }
}


//TODO: There is a bug when you move the mouse out while you are pressing a button. The key is still counted as "pressed" even though you release it outside of the intended area
//NOTE: might have fixed the bug. Do some further investigation by making a smaller element.
this.anyDown = function(){
    if(mouseDownCount){
        for(p in mouseDown){
            if(mouseDown[p]){
                return true;
            }
        }
    }
}

this.setLeftDownCallbackFunction = function(fun){
    mouseDownCallbacks[0] = fun;                
}
this.setRightDownCallbackFunction = function(fun){
    mouseDownCallbacks[2] = fun;                
}
this.setMiddleDownCallbackFunction = function(fun){
    mouseDownCallbacks[4] = fun;                
}

this.setSpcifiedDownCallbackFunction = function(num, fun){
    mouseDownCallbacks[num] = fun;              
}

this.leftDown = function(){
    if(mouseDownCount){
        return mouseDown[0] != 0;
    }
}
this.rightDown = function(){
    if(mouseDownCount){
        return mouseDown[2] != 0;
    }
}
this.middleDown = function(){
    if(mouseDownCount){
        return mouseDown[4] != 0;
    }
}

this.setMouseMoveCallback = function (callback){
    mousemoveCallback = callback;
}
this.setMouseWheelCallback = function (callback){
    mouseWheelCallback = callback;
}
this.setMouseOverCallback = function (callback){
    mouseOverCallback = callback;
}
this.setMouseOutCallback = function (callback){
    mouseOutCallback = callback;
}

this.enableTracer = function(){
    tracePosArray = new Array();
    mouseTracer = 1;
}

this.getMouseTracerData = function() {
    return tracePosArray;
}

}

所以：我保证JS文件已加载。但是我仍然无法访问Mouse()我window.onload体内函数中的方法，它显示为undefined. 这对我来说很奇怪，因为如果我创建一个完全相同的 HTML 文件，我就可以访问它。

这里发生了什么？node.js / express 中是否有一些魔术技巧会禁用这种交互？

补充笔记：

  • 我使用 Jade 作为模板引擎。
  • “mouse.js”文件有效。我以前用过几次。
  • 我正在使用 socket.io 进行客户端和服务器之间的通信。

完整的标题：

<head><title>My awesome title</title><link rel="stylesheet" href="/stylesheets/foundation.min.css"><link rel="stylesheet" href="/stylesheets/normalize.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/socket.io/socket.io.js"></script><style type="text/css"></style><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/vendor/custom.modernizr.js"></script><script type="text/javascript" src="/javascripts/vendor/zepto.js"></script><script type="text/javascript" src="/javascripts/mouse.js"></script><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta name="viewport" content="width=device-width"></head>
4

1 回答 1

1

如果 Mouse 函数未定义，则会引发错误。警报显示“未定义”的原因是鼠标函数不返回任何内容，因此未定义。它应该用作构造函数，如 'new Mouse()'

于 2013-05-03T01:27:08.427 回答