Javascript 在事件之后构建事件？

我正在尝试构建一个画布绘图应用程序，该应用程序将在mousedown上放大线条，然后在放大的正方形上也使用mousedown进行绘图

我认为我的代码的结构有问题-不确定如何安排函数，以便第一部分（选择正方形并缩放）之后是第二部分（绘图应用程序）。我曾尝试将整个内容粘贴到zoom应用程序中，以便调用zoom函数，然后停止事件侦听器并启动绘图应用程序，但这没有起作用

我希望这是清楚的-有人能看出我错在哪里吗？ 谢谢 尼克

代码如下：

function doFirst() {
var x=document.getElementById('canvas');
canvas=x.getContext('2d');
pic = new Image ();
pic.src = "kingtut.jpg";
pic.addEventListener ("load", function()
{canvas.drawImage(pic, 0, 0,1200, 600);},false);
var radius = 10;
dragging = false;
}

function square (e) {
var xPos = Math.floor(e.clientX/200)*200;
var yPos = Math.floor(e.clientY/100)*100;
canvas.drawImage(pic, 0, 0,1200, 600);
canvas.strokeRect (xPos, yPos, 200, 100);
}


function zoom (e) {
var scale = 6;
var xPos = Math.floor(e.clientX/100)*100;
var yPos = Math.floor(e.clientY/100)*100;
canvas.translate(-xPos*scale, -yPos*scale);
canvas.scale(scale,scale);
document.addEventListener("mousedown", function(e){e.stopPropagation();zoom}, true);

canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);
canvas.addEventListener('mouseup', disengage);
var putPoint=function (e) {
if (dragging){
canvas.beginPath();
canvas.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
canvas.fill();
canvas.beginPath();
canvas.moveTo(e.clientX, e.clientY);
    }
}
}
var engage = function (e) {
dragging = true;
putPoint(e);
}

var disengage = function (e) {
dragging = false;
canvas.beginPath();
}

window.addEventListener("mousedown", zoom, false);
window.addEventListener("load", doFirst, false);
window.addEventListener("mousemove", square, false);

---

所有web浏览器都遵循的冒泡事件模型非常简单：

浏览器提供了很多事件。你可以把它们列出来。 另外，您还可以列出其他控件或代码提供的其他事件

其他代码关系绑定由您的代码模式提供，在您的示例中是OOP

因此，在JavaScript的情况下：

如果要侦听事件，应将函数绑定到事件：

window.addEventListener("mousedown", zoom, false);

您可以绑定到事件mousedown函数zoom

若要停止侦听事件，应将函数从事件中解除绑定：

window.removeEventListener ("mousedown", zoom, false);

您可以解除与事件mousedown函数zoom的绑定

但是！！如果你写：

window.addEventListener("mousedown", zoom, false);
window.addEventListener("mousedown", engage, false);

将函数缩放绑定到事件鼠标向下移动2次！所以它打了两次电话

因此，根据您的代码，您应该添加

removeEventListener

要覆盖侦听器，请执行以下示例：

window.removeEventListener("mousedown", zoom, false);
window.addEventListener("mousedown", engage, false);

祝你好运