移除之前的事件监听器并添加新的事件监听器

Question

我正在创建一个绘图应用程序，我试图在画布上绘制不同的形状（矩形、圆形、线条），具体取决于形状按钮的单击。因此，当我附加onmousedown、onmouseup、onmousemove 时，在画布上说矩形形状按钮单击然后它在画布上添加事件，当我单击说圆形按钮时，它为画布上的矩形和圆形添加鼠标事件。所以我的问题是如何删除以前的事件或更改其处理程序？

源代码： https://github.com/anuj-jaryal/screenshot-chrome-extension/tree/add-cropping?files=1

它是一个 Chrome 扩展程序，所以首先在 Chrome 扩展程序中进行设置。

Answer 1

解决此问题的更简单方法是不更改事件侦听器。

使用标志，每次用户选择新形状时更改他，并在每次点击画布时检查标志。

let newWeDrawing = "circle";

function userChooseRect() {
    newWeDrawing = "rect"
}

function userClickedOnCanvas() {
    switch (newWeDrawing) {
        case "cirecle":
            drawCircle();
            break;
        case "rect":
            drawRect();
            break;
    }
}

或者，更好的方法是使用一些哈希表来描述不同的选项。

let newWeDrawing = 1;

function userChooseShape(idOfShape) {
    newWeDrawing = idOfShape;
}

function userClickedOnCanvas() {
    switch (newWeDrawing) {
        case 1:
            drawCircle();
            break;
        case 2:
            drawRect();
            break;
    }
}