添加空格事件监听控制video或audio的播放/暂停，处理“点击进度条触发空格默认事件”问题

环境

vue2

问题

我为整个页面添加了空格的事件监听，并阻止空格的默认事件（页面向下滑），当按下空格，可以控制video或audio控件的播放/暂停。点击播放按钮，再按下空格，功能正常。但当点击了进度条，再按下空格，发现触发的是空格的默认事件，而不是控制播放/暂停的事件。

原因

document.addEventListener("keydown",function(){});

以上这段代码是对整个页面的元素进行监听的
开发者工具查看video或audio，发现这两个控件都是单独一个元素，并没有子元素

把鼠标放到进度条上，看到进度条是input元素，但audio下又看不到input子元素

原因就是，当点击进度条时，整个网页是focus在了进度条这个控件上，且input并没有显式的出现在document上，所以全局的空格事件监听对这个进度条无效，触发默认的事件。

原实现代码

mounted() {
    document.addEventListener("keydown",this.handleSpacebarKey);
  },
methods:{
	handleSpacebarKey(e){
      if(e.keyCode === 32 && this.wavesurfer){
        e.preventDefault();
        this.playFlag = !this.playFlag
        this.playFlag ? this.wavesurfer.play() : this.wavesurfer.pause()
      }
    },
}

解决

利用video或audio的自带的事件，其中有对进度条的回调方法（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video）

给video或audio的seeked添加事件监听，当我们移动或点击进度条时，此时还是focus在进度条控件上，我们需要移除这个focus，即blur掉，移除焦点

this.mediaElt = document.querySelector("#video")
        this.mediaElt.addEventListener('seeked',function(){
          this.blur()
        })