Почему я не могу удалить слушателей?

Question

Привет, я пишу доску, на которой вы можете рисовать в Vue. Я использую SVG, чтобы рисовать пути. Это работает с моими EventHandlers, но я хочу удалить Обработчики, когда я делаю свою мышь. Приложение должно работать так, как когда вы нажимаете, доска получает все Eventhandlers, и вы можете нарисовать линию. Когда вы не нажимаете, вы не рисуете. В данный момент я делаю бесконечную строку, когда нажимаю один раз.

Надеюсь, это понятно: /

Спасибо

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 является экземпляром объекта компонента.