Javascript 滚动是否会使元素失去焦点并触发模糊事件？

我正在使用React创建一个页面，其中嵌入了多个视频。我希望在视频离开视口时暂停视频播放。出于本能，我在视频标签中尝试了

onBlur

事件，但我的处理程序没有被调用。我查找了各种链接，发现人们使用window的

pageYOffset

属性处理了相同的链接。 我可以使用

pageYOffset

来执行此操作，但我无法理解视频移出视口时为什么没有调用

onBlur

事件处理程序

<video ref="vidRef" onBlur = {console.log("Blur called")} onPlay={() => this.hidePlayButton()} onPause={() => this.showPlayButton()} onClick={() => this.showPlayButton()} onEnded={() => this.showPlayButton()}>
          <source type="video/mp4" data-reactid=".0.1.0.0.0" src={this.props.hpVideoSrc}/>
      </video>

this.hidePlayButton（）}onPause={（）=>this.showPlayButton（）}onClick={（）=>this.showPlayButton（）}onedded={（）=>this.showPlayButton（）}>

在尝试上面的代码片段时，我可以在控制台上看到输出。但是当我用这样的处理程序替换控制台命令时

<video ref="vidRef" onBlur={() => this.handleOnBlur()} onPlay={() => this.hidePlayButton()} onPause={() => this.showPlayButton()} onClick={() => this.showPlayButton()} onEnded={() => this.showPlayButton()}>
          <source type="video/mp4" data-reactid=".0.1.0.0.0" src={this.props.hpVideoSrc}/>
      </video>

this.handleOnBlur（）}onPlay={（）=>this.hidePlayButton（）}onPause={（）=>this.showPlayButton（）}onClick={（）=>this.showPlayButton（）}

它就是不起作用。未调用

onBlur

处理程序。我想知道视频元素调用

onBlur

事件的条件是什么。当我将视频从视图中滚动时是否触发

---

我可以在这里看到

onBlur

的条件。这些是调用事件的唯一条件吗？我是HTML/CSS和JS的初学者，因此我对这些事件没有深入的了解。

面临类似的问题，因为我在包装器div元素上处理onmousedown事件并防止默认操作起作用。

---

onBlur通常用于输入字段，因此您应该尝试onmouseout（），但我建议您添加一个DOM事件，该事件监视滚动并在每次触发时执行一些检查，以确定样式属性offsetLeft和offsetTop是否不在视图中。请注意，某些事件可能无法按预期工作。特别是浏览器之间的比较，特别是在explorer/edge中。

onBlur={this.handleOnBlur（）}

这使它工作起来。您只需简单地调用函数即可。但对我来说，问题是，当页面加载时，事件会触发。当视频从电视里消失时就不会了viewport@IntrepidBlue你能简单介绍一下你是如何使用

pageYOffset

完成这项任务的吗？