事件侦听器在单击时未被删除

Question

我试图在单击画布元素时删除事件监听器：

document.getElementById("canvas")
.addEventListener("click", setPath, false);
function setPath() {
if (check) {
document.getElementById("canvas").
addEventListener("mousemove", mouseOverPath, false);
} else {
document.getElementById("canvas").
removeEventListener("mousemove", mouseOverPath, false);
}
function mouseOverPath(event) {
drawLine.x = event.clientX;
drawLine.y = event.clientY;
drawLine.draw();
}
}
document.getElementById("canvas").
addEventListener("click", () => {
if (check == true) {
check = false;
} else if (check == false) {
check = true;
}
}, false);

<canvas id="canvas" height="200" width="200" style="border:1px solid black;">

if 语句执行正确，但 removeEventListener 执行不正确。

检查部分：

Answer 1

你的问题是你在setPath中定义了mouseOverPath：

function setPath() {
if (check) {
document.getElementById("canvas").addEventListener("mousemove", mouseOverPath, false);
} else {
document.getElementById("canvas").removeEventListener("mousemove", mouseOverPath, false);
}
function mouseOverPath(event) {
drawLine.x = event.clientX;
drawLine.y = event.clientY;
drawLine.draw();
}
}

对于每个setPath调用，mouseOverPath都是不同的对象，因此addEventListener的mouseOverPath和removeEventListener的引用不同的对象，并且截至此removeEventListener不执行任何操作。

如果setPath函数，则需要将mouseOverPath函数移出。

以下是问题的简化测试用例：

var tmp;
function test() {
if (!tmp) {
// save the current foo for the first call of test
tmp = foo
} else {
// the comparison of the current foo with tmp (the previous foo) is false
console.log(tmp == foo)
}
function foo() {}
}
test()
test()