React音乐播放器从鼠标eventListener切换到窗口eventListener

Question

我正在制作一个简单的音乐播放器，我面临的问题是播放器有一个进度条，但是在鼠标移动时，如果我拖动它的父容器外，它会失去焦点。我的想法是听窗口，而不是有点工作，但现在它听取任何类型的鼠标事件，如播放/暂停等。

我可以在mouseleave上切换到窗口事件监听器，或者有人知道如何做到这一点吗？

我使用的一些代码，innerProgressbar是我可以拖动的行，也是歌曲时间的更新。 outerProgress是它的父容器，高度为6px。

  mouseMove = (e) => {
    if(this.songSeeking){
    const{ song } = this.state;
    let mouseX = e.clientX - this.outerProgress.offsetLeft;
    let newTime = mouseX * song.duration/ this.outerProgress.offsetWidth;
    song.currentTime = newTime;
    this.innerProgress.style.width = mouseX + 'px';
  }
}



mousedown = (e) => {
const { song } = this.state;
if(!this.songSeeking){
  this.songSeeking = true;
  song.pause();
  this.setState({playing: false});
}



mouseup = (e) => {
  const { song } = this.state;
  if(this.songSeeking){
    this.songSeeking = false
    song.play();
    this.setState({playing: true});
  }
}