Question

我正在使用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>

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

<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>

它只是没有用。没有调用onBlur处理程序。我想知道为视频元素调用onBlur事件的条件是什么。当我将视频滚出视图时是否会触发？我可以在link中看到onBlur的条件。这些是事件被调用的唯一条件吗？我是HTML / CSS和JS的初学者，所以我对这些事件没有深入的了解。

Answer 1

面对类似的问题，对于我来说，我处理包装div元素上的onmousedown事件并防止默认操作起作用。 https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

滚动会使元素失焦并触发onBlur事件吗？

1 个答案: