javascript - removeEventListener 不会删除 keydown 上的事件

Question

每当我的组件被渲染时，我都会附加一个事件监听器。

 mounted() {
    window.addEventListener("keydown", e => this.moveIndex(e));
}

即使它位于 moveIndex 方法本身内部，事件监听器也不会被删除。以下是我尝试删除该事件的方法。

 moveIndex(e) {
    ...
      case 0:
        player.play({
           uri: "https://tv-trtturk.live.trt.com.tr/master.m3u8"
          });
          window.removeEventListener("keydown", e => this.moveIndex(e));
       break;
   ...
}

即使我尝试通过按钮单击事件删除此事件，它也不会被删除。我有什么遗漏的吗？

Answer 1

removeEventListener要求监听器相同:

The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener().

自 (e => this.moveIndex(e)) !== (e => this.moveIndex(e)) 起，它们被视为不同的监听器。

应该是

window.addEventListener("keydown", this.moveIndex);

和

window.removeEventListener("keydown", this.moveIndex);

由于 moveIndex 接受 e 作为参数，并且 Vue 将方法绑定(bind)到组件实例，因此 this.moveIndex 可以安全地用作回调。