Javascript 为什么不能'；我不能删除侦听器吗？

嗨，我写了一个白板，你可以在vue上画画。我使用svg绘制路径。它确实适用于我的EventHandler，但我想在制作鼠标时删除这些处理程序。该应用程序的工作原理应该是，当您单击时，白板将获取所有EventHandler，您可以绘制一条线。当你不点击时，你就不会画画。此刻，当我点击一次时，我画了一条无止境的线

我希望这是可以理解的：/

谢谢

main() {
      // hole whiteboard
      let whiteboard = document.getElementById("whiteboard");
      const color = "black";



      let test2 = event => {
                //console.log(event);
        this.createSvgElement(whiteboard, color);
        this.setup(event);
        //alert("Ich bin reich!");
      }

            whiteboard.addEventListener("mousedown", test2);

    },
    createSvgElement(w, c){
            this.whiteboard.removeEventListener("mousedown", this);
      this.whiteboard = w;
      this.segments = [];
      this.points = [];

      this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");

      this.path.setAttributeNS(null, "stroke", c);
      this.path.setAttributeNS(null, "stroke-width", "2");
      this.path.setAttributeNS(null, "fill", "transparent");
            //console.log(this.path);


    },
    setup(event){
      this.whiteboard.addEventListener("mousemove", e => {
                const [x, y] = this.pos(e);
            //console.log(x);
            this.points.push({ x, y });
                        const test = this.path.getAttributeNS(null, "d");
                        //console.log(test);
            this.path.setAttributeNS(null, "d", test + ` L${x},${y}`);
            });


            this.whiteboard.addEventListener("mouseleave", e =>{
                this.whiteboard.removeEventListener("mousemove", this);
        this.whiteboard.removeEventListener("mouseup", this);
        this.whiteboard.removeEventListener("mouseleave", this);
            });

            this.whiteboard.addEventListener("mouseup", e =>{
                this.whiteboard.removeEventListener("mousemove", this);
        this.whiteboard.removeEventListener("mouseup", this);
        this.whiteboard.removeEventListener("mouseleave", this);
            });



    }, 
    pos(e){
      const rect = this.whiteboard.getBoundingClientRect();
      return [e.clientX - rect.left, e.clientY - rect.top];
    }, 

---

处理特定元素的

mousedown

事件时，不能保证在同一元素上收到相应的

mouseup

事件，因为鼠标按钮可能会在指针位于不同元素上时释放，甚至完全在窗口之外

唯一允许您这样做的API是，尽管这是非常不标准的

处理此类鼠标事件的推荐方法是，当鼠标落在目标元素上时，将

mousemove

和

mouseup

事件附加到文档元素。这是因为鼠标事件会冒泡，即使指针在浏览器窗口之外，也会对文档触发

mouseup

简化：

const onMouseDown=e=>{
document.addEventListener（'mousemove'，onMouseMove）
document.addEventListener（'mouseup'，onMouseUp）
}
const onMouseUp=e=>{
document.removeEventListener（'mousemove'，onMouseMove）
document.removeEventListener（'mouseup'，onMouseUp）
}
const onMouseMove=e=>{
//处理移动事件
}
this.whiteboard.addEventListener（'mousedown'，onMouseDown）

调用

removeEventListener

的方式也有错误：

---

第二个参数应该是要删除的事件侦听器函数

这是组件对象实例。
也许您不应该一直添加和删除侦听器，而应该尝试跟踪鼠标是否使用变量单击，并在事件中检查它
removeEventListener（）
的第二个参数必须是函数，它必须与
addEventListener（）
中使用的函数相同。这通常要求它是命名函数，而不是匿名函数。
这是包含所有这些方法的对象，而不是侦听器函数。那么，您希望
removeEventListener（“mousedown”，this）
删除什么侦听器呢？它应该类似于
this.whiteboard.removeEventListener（“mousedown”，test2）
this.whiteboard.removeEventListener("mousemove", this)
                                                 ^^^^