クラスのsvgドラッグのイベントリスナーを削除する

Question

ドラッグできますが、ドラッグを削除できません。私が "this"をバインドするとそこにそれを読んでください それは新しい関数を渡すので、私はローカル変数でいくつかトリッキーをする必要があります。

でもそうは思われません。

コード：

// 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

あなたの問題は、あなたがあなたの明確なの代わりにもthis

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

としてコンストラクタの内部movemoveイベントをバインドする必要が克服するためにmousemove

に添付された関数への参照を持っていないです関数を使用して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>