javascript - 为什么我无法删除监听器？

Question

嗨，我写了一个白板，你可以在 vue 中绘图。我使用 svg 来绘制路径。它确实可以与我的事件处理程序一起使用，但是当我抬起鼠标时，我想删除处理程序。该应用程序应该像这样工作，当您单击时，白板会获取所有事件处理程序，并且您可以画一条线。当你不点击时，你就不会绘画。此刻，当我点击一次时，我画了一条无尽的线。

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

谢谢

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];
    }, 

Answer 1

当您处理特定元素的 mousedown 事件时，不能保证在同一元素上收到相应的 mouseup 事件，因为鼠标按钮可能被释放而指针位于不同的元素上方，甚至完全位于窗口之外。

允许您执行此操作的唯一 API 是 setCapture ，尽管这是非常不标准的。

处理此类鼠标事件的推荐方法是，当鼠标位于目标元素上时，将 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 => {
  // Handle move event
}

this.whiteboard.addEventListener('mousedown', onMouseDown)

您调用 removeEventListener 的方式也有错误:

this.whiteboard.removeEventListener("mousemove", this)
                                                 ^^^^

第二个参数应该是您要删除的事件监听器函数； this 是组件对象实例。