来自箭头函数的 ES6 removeEventListener (OOP)

Question

我有一个 class 这样的：

class Hanoi{

   constructor(canvas) {
      //construcor things
   }

   onMouseDown(e) {
      for (var i = 0; i < this.pieces.length; i++) {
         let piece = this.pieces[i];
         if (piece.isClicked(e)) {
            this.isDragging = true;
            this.dragPiece = piece;
            this.bound = evt => this.onMouseMove(evt);
            this.canvas.addEventListener("mousemove", ev => {this.onMouseMove(ev)});
            this.canvas.addEventListener("mouseup", ev =>{this.onMouseUp(ev)});
            this.draw();
         }
      }
   }

   onMouseMove(e) {
      this.dragPiece.x = e.clientX;
      this.dragPiece.y = e.clientY;
      this.draw();
   }

   onMouseUp(e) {
      this.canvas.removeEventListener("mousemove", this.onMouseMove);
      this.canvas.removeEventListener("mouseup", this.onMouseUp);
      this.isDragging = false;
      this.draw();
   }
}

onMouseDown 添加了两个事件侦听器，但是由于箭头函数，我无法在调用 onMouseUp 时将它们移除。

处理此问题的最佳方法是什么？

Answer 1

尝试以下操作：

...

constructor(canvas) {
  this.onMouseMove = this.onMouseMove.bind(this);
  this.onMouseUp = this.onMouseUp.bind(this);
}

onMouseDown(e) {
  ...
  this.canvas.addEventListener("mousemove", this.onMouseMove);
  this.canvas.addEventListener("mouseup", this.onMouseUp});
  ...
}

onMouseUp(e) {
  this.canvas.removeEventListener("mousemove", this.onMouseMove);
  this.canvas.removeEventListener("mouseup", this.onMouseUp);
  ...
}

Answer 2

如果您想稍后引用该函数，例如删除，最好使用命名的普通函数定义。但是，如果你坚持使用箭头，你仍然可以这样做；

您可以将箭头函数表达式赋给一个变量，同时将其作为回调传递。然后使用该名称删除。所以如果你不想乱扔全局命名空间，你总是可以使用周围的函数对象来存储你的箭头函数。在这种特殊情况下，我将 "click" 事件侦听器回调命名为 X 并将 "muouseup" 箭头函数存储在该函数对象的 muel 属性下，它在触发时自行删除。

喜欢；

btt.addEventListener("click", function X(e){
  e.target.textContent === "Add Listener" ? (e.target.addEventListener("mouseup", X.muel = e => {
                                                                          e.target.removeEventListener("mouseup", X.muel);
                                                                          console.log("mouse up fired and event listener removed");
                                                                        }),
                                             e.target.textContent = "Remove Listener")
                                          : e.target.textContent = "Add Listener";
                              });

<button id="btt">Add Listener</button>

来自箭头函数的 ES6 removeEventListener (OOP)

ES6 removeEventListener from arrow function (OOP)

javascript

oop

ecmascript-6

arrow-functions