具有事件处理程序和上下文/作用域问题的 Es6 类

Question

>我有一个带有两个窗格的容器。我正在使其中一个可重新调整大小和绝对，另一个根据第一个的大小实时调整。

不幸的是，我刚刚编写的 es6"调整大小控制器"遇到了问题。由于我做出了使用箭头函数的错误决定，因此无法删除事件侦听器。除此之外，我的数学错误，它按预期运行。但是，当我尝试用几种可能的解决方案修复我的错误时，我要么没有得到任何功能，要么是关于上下文和函数不是函数的错误。

希望这里有人可以看看我的确切设置并告诉我它应该如何。将 Arrow 函数替换为普通函数(带或不带事件参数(都不起作用。我放弃 Es6 课程会更好吗？也许我已经解开了几层复杂性。

class ResizeController {
constructor(){
    this.chatContainer = document.getElementById("chatContainer");
    this.messageWindowContainer = document.getElementById("messageWindowContainer");
    this.messageWindowContentContainer = document.getElementById("messageWindowContentContainer");
    this.messageWindowContent = document.getElementById("messageWindowContent");
    this.startX = "";
    this.startWidth = this.getMessageWindowWidth();
}
init(){
    this.messageWindowContainer.addEventListener('mousedown', (e)=>{e.stopPropagation()});
    this.messageWindowContentContainer.addEventListener('mousedown', (e)=>{this.onMouseDown(e)});
    this.messageWindowContent.addEventListener('mousedown', (e)=>{e.stopPropagation()})
}
onMouseDown(e) {
    this.onDown(e);
    e.preventDefault();
}
onDown(e){
    this.startX = e.clientX;
    this.messageWindowContentContainer.addEventListener('mousemove', (e)=>{this.onMouseMove(e)});
    this.messageWindowContentContainer.addEventListener('mouseup', (e)=>{this.onMouseUp(e)});
}
onMouseMove(e){
    this.mouseMove(e);
    e.preventDefault();
}
onMouseUp(e){
    this.mouseUp(e);
    e.preventDefault();
}
mouseMove(e) {
        this.messageWindowContainer.setAttribute("style","width:"+( this.startWidth - e.clientX + this.startX)+"px");
}
mouseUp(e){
    console.log("stopdrag")
    this.messageWindowContentContainer.removeEventListener('mousemove', (e)=>{this.onMouseMove(e)});
    this.messageWindowContentContainer.removeEventListener('mouseup', (e)=>{this.onMouseUp(e)});
}

getMessageWindowWidth(){
    let chatContainerWidth = document.getElementById("chatContainer").offsetWidth;
    let messageWindowContainerWidth = document.getElementById("messageWindowContainer").offsetWidth;
    return (chatContainerWidth - messageWindowContainerWidth);
}

}

export default ResizeController

Answer 1

答案在这里

找到：https://gist.github.com/Restuta/e400a555ba24daa396cc

我只是在我的构造函数中定义了一次以下代码，然后将它们用作我的事件处理程序。

this.bound_onMouseDown = this.onMouseDown.bind(this); this.bound_onMouseMove = this.onMouseMove.bind(this); this.bound_onMouseUp = this.onMouseUp.bind(this);

在

构造函数外部声明它们不是解决方案。

Answer 2

作为第二个参数传递给.addEventListener() .removeEventListener()的值应该是函数引用，而不是匿名函数。您可以使用.bind()来保留this。

class ResizeController {
  constructor() {
    this.chatContainer = document.getElementById("chatContainer");
    this.button = document.querySelector("button");
    this.init();
  }
  init() {
    // pass function reference
    this._onMouseMove = this.onMouseMove.bind(this);
    this.chatContainer.addEventListener("mousemove", this._onMouseMove);
    this.button.onclick = () => this.removeListener();
  }
  onMouseMove(e) {
    this.chatContainer.innerHTML = "moved at " + new Date();
  }
  removeListener() {
    // pass function reference
    this.chatContainer.removeEventListener("mousemove", this._onMouseMove);
    this.chatContainer.textContent = "removed mousemove event listener";
  }
}
onload = () => new ResizeController();

#chatContainer {
  display: block;
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid blue;
}

<div id="chatContainer"></div>
<button>remove mousemove event listener</button>