JS 文件中的 Javascript 函数不会从画布中调用
Posted
技术标签:
【中文标题】JS 文件中的 Javascript 函数不会从画布中调用【英文标题】：Javascript function from a JS file doesn't get called from the canvas 【发布时间】：2017-01-01 08:45:28 【问题描述】：我正在尝试学习 javascript 和 html5 画布，但是，事实证明它有点令人困惑，我不明白为什么它似乎不起作用...
我正在创建一个简单的地图，它具有谷歌地图的一些功能（拖放/放大/缩小/等）。为了做到这一点，我选择了 html5 canvas 和 easeljs 来实现拖放功能。
我有一个包含 2 个函数的 javascript 文件 (path.js)：
pathConstructor() - 来自 easeljs 教程的示例函数
drawMap() - 第一个函数的副本稍作修改（现在可能是错误的）
当我从画布调用 pathConstructor() 时，一切正常，但是，在我用 drawMap() 替换它之后，一切都停止了。如果我现在用 pathContrcutor() 替换 drawMap() 甚至都行不通。
我在从画布调用函数之前和之后以及在 pathConstructor() 内部放置了一些警报。之前的警报会响起，但由于某种原因，其他警报不会响起，该函数永远不会被调用...
如果我在画布中使用 pathConstructor 代码作为内联代码，那么它工作得很好，但是，我想避免这种情况，因为我认为这是糟糕的编程。我希望它整洁，每个脚本都有自己的文件。
有人知道为什么会这样吗？
HTML
<!Doctype html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="path.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" style="border:1px dotted black;">
<script>pathConstructor();</script>
</canvas>
</body>
</html>
Javascript
var stage;
function pathConstructor()
alert('inside pathConstructor');
stage = new createjs.Stage('canvas');
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.on("pressmove", function(evt)
// currentTarget will be the container that the event listener was added to:
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
// make sure to redraw the stage to show the change:
stage.update();
);
stage.update();
function drawMap()
stage = new createjs.Stage('canvas');
var bitMap = new createjs.Bitmap('middle-earth-map.jpg');
stage.mouseMoveOutside = true;
var dragger = new createjs.Container();
dragger.x = dragger.y = 0;
dragger.addChild(bitMap);
stage.addChild(dragger);
dragger.on('pressmove', function(evt2))
evt2.currentTarget.x = evt2.stageX;
evt2.currentTarget.y = evt2.stageY;
stage.update();
);
stage.update();
【问题讨论】：
【参考方案1】：对我来说它工作正常，您只需删除 dragger.on('pressmove', function(evt2)) 中多余的“)”；
dragger.on('pressmove', function(evt2))
evt2.currentTarget.x = evt2.stageX;
evt2.currentTarget.y = evt2.stageY;
stage.update();
);
【讨论】：
现在一切正常，谢谢！如何对 JavaScript 进行故障排除？我尝试使用 try catch() 但这似乎无济于事。如果有错误，它甚至不会进入我所看到的函数 你的错字很不幸，因为它创建了完全合法的代码。您可以将任何内容包装在 块中，因此您的示例在语法上没有任何问题——这不是您的想法。以上是关于JS 文件中的 Javascript 函数不会从画布中调用的主要内容，如果未能解决你的问题，请参考以下文章
从按钮单击事件直接调用存储在外部 JS 文件中的 JavaScript 函数