在课堂上删除SVG拖动的活动听众

Question

我可以拖动，但是我无法删除拖动。我读到，一旦我绑定了"这个"它传递了一个新功能，我需要使用本地变量进行一些欺骗。

，但似乎无法做到。

代码：

// import "./general";
class Home {
  constructor() {
    this.svgContainer = document.getElementById("svg-container");
    console.log(this.svgContainer);
    this.pt = this.svgContainer.createSVGPoint();
    this.circleSVG = document.getElementById("circleSVG");
  }
   startDrag() {
    this.svgContainer.addEventListener("mousemove", this.mouseMoveFunc.bind(this));
    this.circleSVG.addEventListener("mouseup", this.clearEvents.bind(this));
  }
  mouseMoveFunc(e) {
    console.log(this.pt)
    this.pt.x = e.clientX;
    this.pt.y = e.clientY;
    let svgPt = this.pt.matrixTransform(this.svgContainer.getScreenCTM().inverse());
    this.circleSVG.setAttribute("cx", svgPt.x);
    this.circleSVG.setAttribute("cy", svgPt.y);
  }
  clearEvents() {
    console.log(this.svgContainer.attributes)
    this.svgContainer.removeEventListener("mousemove", this.mouseMoveFunc);
    this.circleSVG.removeEventListener("mouseup", this.clearEvents);
  }
}
var home;
window.addEventListener("load", () => {
  home = new Home();
});

这是html：

<svg id="svg-container" width="500" height="500">
     <circle cx="30" cy="30" r="30" id="circleSVG" onmousedown="home.startDrag()"></circle>
</svg>

如何使用类解决此问题？

Answer 1

您的问题是您没有参考mousemove

上附加的功能

要克服您需要用this

绑定构造函数内部的movemove事件

  constructor() {
    //.....
    this.mouseMoveFunc = this.mouseMoveFunc.bind(this);
  }

以及您的清晰功能，请使用mousedown事件删除mouseup和mousemove事件

class Home {
  constructor() {
this.svgContainer = document.getElementById("svg-container");
console.log(this.svgContainer);
this.pt = this.svgContainer.createSVGPoint();
this.circleSVG = document.getElementById("circleSVG");
this.mouseMoveFunc = this.mouseMoveFunc.bind(this);
  }
   startDrag() {
this.svgContainer.addEventListener("mousemove", this.mouseMoveFunc);
 this.circleSVG.removeEventListener('mouseup', this.startDrag);
//this.circleSVG.addEventListener("mouseup", this.clearEvents.bind(this));
  }
  
   stopDrag() {
   console.log(this.svgContainer);
   this.svgContainer.removeEventListener("mousemove", this.mouseMoveFunc);
this.circleSVG.removeEventListener('mousedown', this.startDrag);
  }
  mouseMoveFunc(e) {
console.log(this.pt)
this.pt.x = e.clientX;
this.pt.y = e.clientY;
let svgPt = this.pt.matrixTransform(this.svgContainer.getScreenCTM().inverse());
this.circleSVG.setAttribute("cx", svgPt.x);
this.circleSVG.setAttribute("cy", svgPt.y);
  }
}
var home;
window.addEventListener("load", () => {
  home = new Home();
});

<svg id="svg-container" width="500" height="500">
     <circle cx="30" cy="30" r="30" id="circleSVG" onmouseup="home.stopDrag()" onmousedown="home.startDrag()"></circle>
</svg>