将焦点添加到视频中以禁用不需要的太空栏卷轴

Question

在视频播放器中，我一直希望空格键暂停。这没有发生。

问题 - 不先单击，页面的行为出乎意料。太空栏没有暂停视频，而是使页面向下滚动。

我试图解决的尝试 - 当单击视频播放器时，我注意到与视频播放器相关的众多DIV之一的显示属性从none更改为block。我添加了一下，以查看这是否会使页面行为正确

  if(videoPlayer.style.display === "none"){
    videoPlayer.style.display = "block"
}

它改变了类，但不会改变页面的行为。这只是黑暗中可以切换视频的东西，并且不起作用。

单击页面时，如何确定哪些属性会更改？因此，我可以弄清楚是什么使玩家成为焦点。这样我就可以写一些内容，以将视频重点放在视频中（我想使用浏览器扩展程序？）或只是普通的how to do I solve this problem。

Answer 1

首先，要确定单击页面时发生的事情，您可以使用浏览器的开发人员工具。

例如，在铬中右键单击页面>检查>确保您在顶部的元素选项卡上。

然后，使用Dev工具（或Ctrl Shift C）在左上角的"页面中选择一个元素"工具，以选择要查看的页面上的元素。

在底部附近或右侧的开发工具中，您应该看到一个名为"事件侦听器"的选项卡。单击它以查看元素对用户的反应。那里可能会有一个叫做"单击"的；单击此信息以查看更多信息。

---

其次，如果要阻止太空栏滚动页面，请使用以下内容：

document.onkeydown = function(e){
  if(e.key == " " && e.target == document.body){
    e.preventDefault;
    //Spacebar pressed
    //Place function here to pause the video
  }
}

这里e.preventDefault是阻止页面滚动的行。