包含JS文件在node.js中的奇怪行为

时间:2013-05-02 13:01:33

标签: javascript node.js include express socket.io

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

我的快递应用程序生成的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脚本标记添加了此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>

1 个答案:

答案 0 :(得分:1)

如果鼠标功能未定义,则会抛出错误。警报显示'undefined'的原因是Mouse函数没有返回任何内容,因此未定义。它应该用作构造函数,如'new Mouse()'