Question

我试图在单击Canvas元素时删除eventListener：

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

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

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是一个不同的对象，因此mouseOverPath的{{1}}和addEventListener的那个是指不同的对象，截至removeEventListener为止不执行任何操作。

如果使用removeEventListener功能，则需要将mouseOverPath功能移出。

这是您的问题的简化测试案例：

setPath

单击时未删除eventListener

1 个答案: